/* Large and up */
@media screen and (min-width: 64em) {
    .SideMenu.Active { width: 320px; z-index: 16000003; }
    .row .common-center-col { width: 72%; }
    .row .common-rightside-col { width: 28%; padding-left: 10px; }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
    /* Footer */
    .LayoutFooter .row { padding: 0 10px; }
    .footer-columns-left { width: 25%; padding-right: 0; }
    .footer-columns-blog { width: 100%; padding-right: 20px; }
    .footer-columns-right { width: 75%; padding-right: 0; }
    .footer-columns-common { width: 25%; display: inline-block; }
    .footer-columns-service-partner { width: 100%; }
    .footer-columns-followus { padding-right: 10px; width: 100%; }
    .footer-columns-service, .footer-columns-partner { width: 100%; clear: none; float: left; }
    .footer-facebook-likebox { width: 48%; }
    .footer-facebook-likebox .SideBannerRight { width: 100%; }
    .footer-columns-dbdregister { width: 100%; float: left; margin: 15px 0; clear: left; }
    /* END Footer */

    /* Header */
    .SideMenu.Active { width: 320px; z-index: 16000003; }
    .nav-container .menu li a.HyperLink { padding: 0 12px; font-size: 22px; }
    .nav-container .menu li.highlight-menu a.HyperLink { padding: 0 9px; font-size: 22px; }
    .HeaderMenu ul li a.HyperLink, .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { padding: 8px 10px; font-size: 16px!important; }
    .nav-container .menu li a.HyperLink { padding: 0 12px; }
    .nav-container ul.menu li.menu-hide-small, .nav-container .menu li.login-menu { display: none!important; }
    .HeaderMenuToggle { display: block; margin: 15px 10px 0; }
    /* END Header */
}

/* Medium and up */
@media screen and (min-width: 40em) {
    .sticky-contact-toolMobile { display: none; }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    /* Header */
    .BtnStyle1, .BtnStyle2, .BtnStyle3, .BtnStyle4, .BtnLink, .AddToCartContinue, .AddCart, .ViewDetail { width: 100%; }
    .CategoryNavTabMenu { margin-right: 0; }
    /* END Header */
    /* Footer */
    .LayoutFooter .row { padding: 0 10px; }
    .footer-columns-left { width: 32%; padding-right: 0; }
    .footer-columns-blog { width: 100%; padding-right: 20px; }
    .footer-columns-right { width: 68%; padding-right: 0; }
    .footer-columns-common { width: 28%; display: inline-block; }
    .footer-columns-service-partner { width: 100%; }
    .footer-facebook-likebox { width: 42%; }
    .footer-facebook-likebox .SideBannerRight { width: 100%; }
    .footer-columns-followus { padding-right: 10px; width: 100%; }
    .footer-columns-service, .footer-columns-partner { width: 100%; clear: none; float: left; }
    .footer-columns-dbdregister { width: 100%; float: left; margin: 15px 0; clear: left; }
    .kb-hub-button a { width: 100% !important; }
    /* END Footer */

    .adword-header .logo a { width: 155px; background-size: contain; }

    .row .common-center-col { width: 65%; }
    .row .common-rightside-col { width: 35%; }
    .ContentLayout ul li { background-position-y: 12px; }

    .BlogDetailsImage { width: 60%; }
    .BlogDetailInfo { width: 38%; padding-right: 0; }
    .BlogDetailsDefaultPublisherDiv { margin: 15px 0; font-size: 15px; }
    .BlogDetailCategory {  width: 100%; }
    .BlogDetailTitle { font-size: 22px; line-height: 1.2; }
    .RecentPost .BlogNavNormalListLink a { font-size: 14px; }
    .DateRecentPost { font-size: 10px; }
}

/* Large and down */
@media screen and (max-width: 63.9375em) {
    /* Header */
    .SideMenu.Active { width: 320px; z-index: 16000003; }
    .nav-container .menu li a.HyperLink { padding: 0 12px; font-size: 22px; }
    .nav-container .menu li.highlight-menu a.HyperLink { padding: 0 9px; font-size: 22px; }
    .HeaderMenu ul li a.HyperLink, .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { padding: 8px 10px; font-size: 16px!important; }
    .nav-container .menu li a.HyperLink { padding: 0 12px; }
    .nav-container ul.menu li.menu-hide-small, .nav-container .menu li.login-menu { display: none!important; }
    .HeaderMenuToggle { display: block; margin: 15px 10px 0; }
    .HeaderLogo img { max-height: 45px; height: auto !important; height: 45px; }
    .header-container1 .HeaderLogin, .header-container1 .HeaderLoginWishlist, .header-container1 .LanguageSection, .header-container2 .HeaderLoginAccount, .header-container3 { display: none; }
    .headerMenuNormal { display: block; }
    .nav-container ul.menu li.phone-contact { font-size: 26px; }
    .phone-free-signup { display: none; }
    .nav-container .menu li .HeaderMenuNavItemLeft, .nav-container .menu li .HeaderMenuNavItemRight { float: none; }
    .nav-container ul.menu li a.HyperLink { width: 100%; display: block; text-align: left; }
    .nav-container ul.menu > table > tbody > tr > td { width: 25%; float: left; display: inline-block; }
    div.login-menu { display: none; }
    .nav-container ul.menu li { margin-right: 0; }
    .nav-container .menu li a.HyperLink { padding: 0 10px; font-size: 22px; }
    .nav-container ul.menu li.phone-contact { font-size: 26px; }
    .nav-container ul { width: 100%; border: 0; }
        .nav-container ul.menu li { width: 100%; background-color: #000; border-right: solid 1px #fff; margin-bottom: 1px; padding: 5px 0; }
    div.highlight-menu a.HyperLink { padding: 0 20px; }
    div.phone-contact a { clear: left; float: left; line-height: 22px; font-size: 23px; font-family: ThaiSansNeueBold; display: block; }
    div.phone-contact .phone-contact-label { line-height: 24px; }
    /* END Header */

    .HeaderContactTel a, .HeaderContactLine a, .HeaderContactFB a { padding: 0 0 0 30px; font-size: 18px; background-size: 25px auto; height: 24px; }

    .ContentMenuNavList .CategoryNavNormalList a { background-position-y: 14px; }
    .CommonPageTopTitle { font-size: 24px; }
    .SidebarTopTitle { font-size: 20px; }
    ul.root li.parent > a.root-link { font-size: 20px; }
    .CategoryNavNormalList a, .DepartmentNavNormalList a, .ManufacturerNavNormalList a { font-size: 16px; }
    ul a.leaf-link { font-size: 16px; }
    .countContent { font-size: 14px; padding: 3px 15px !important; }
    .BlogListItem { width: 32%; }
    .BlogListItemImage { max-height: 185px; min-height: 100%; }
        .BlogListItemImage img { max-height: 185px; }
    .BlogListItemDate { line-height: 20px; margin-top: 20px; }
    .BlogListTop .BlogDetailsTopTitle { font-size: 24px; }
    .BlogListItemName { font-size: 18px; }
    .BlogListViewMore { font-size: 18px; }
    .BlogSidebarTopTitle { font-size: 20px; }
    .BlogNavNormalListLink a { font-size: 16px; }
    .BlogSidebarRight { padding: 20px 10px; }
}


/* Small only */
@media screen and (max-width: 39.9375em) {

    /* Header */
    .HeaderMenuNormal { min-height: 60px; padding: 5px 0 0; }
        .HeaderMenuNormal .row { padding: 0; }
            .HeaderMenuNormal .row .row { padding: 0; }
        .HeaderMenuNormal .phone-contact { font-size: 21px; padding: 0 8px; }
    .HeaderImageLogoDiv { background-position: 5px top; }
        .HeaderImageLogoDiv .HeaderLogo a { opacity: 1; }
        .HeaderImageLogoDiv:hover .HeaderLogo a { opacity: 1; }
    .HeaderImageLogoDiv { width: 135px; }
        .HeaderImageLogoDiv .HeaderLogo a { background: url(../TakraOnlineWebsite/Images/Icon/logo-hover_2.svg) no-repeat left top; width: 145px; background-size: contain; }
    div.phone-contact span { font-size: 28px; }
    div.phone-contact .phone-contact-label { font-size: 22px; width: 100%; text-align: right; line-height: 22px; font-family: ThaiSansNeue; }
    div.phone-contact a { clear: left; float: left; line-height: 22px; font-size: 23px; font-family: ThaiSansNeueBold; display: block; }
    div.highlight-menu { display: none; }
    .phone-free-signup { display: block; }
    .nav-container .menu li.highlight-menu a.HyperLink { padding: 0 5px; font-size: 21px; }
    .ProductMaster .sticky-menu .HeaderMenuToggle, .ProductMaster .sticky-menu .header-container2-left, .ProductMaster .sticky-menu .header-container2-right { transition: all 0.2s linear; display: none; }


    .HeaderSocialLink { margin-left: 0; }
    div.phone-contact { display: none; }
    .HeaderMenuNormal { min-height: 52px; padding: 5px 0 0; }
    .HeaderMenuToggle { padding: 12px 2px 0 6px; margin: 0; }
    .HeaderLogo img { height: 40px; }
    .HeaderImageLogoDiv { width: 48px; background-size: auto 30px; height: 48px; background-position-y: 45%; }
        .HeaderImageLogoDiv .HeaderLogo a { background-size: auto 44px; background: url(../TakraOnlineWebsite/Images/Icon/logo-hover.svg) no-repeat; background-position-y: 45%; }
    div.phone-contact span { display: none; }
    .phone-free-signup { border: none; padding: 0; }
    .nav-container ul.menu li.highlight-menu { display: none; }
    .menu-label { line-height: 40px; margin-right: 1px; }
    .HeaderImageLogoDiv .HeaderLogo a { background-position-y: 24%; margin-left: 22px; margin-top: 5px; width: 160px; height: 55px; }
    /* END Header */

    /* Footer */
    .LayoutFooter { padding: 30px 0; }
    .LayoutFooter { width: inherit; background-color: #f0f0f0; color: #fff; padding: 30px 0 20px; border-top: solid 1px #fff; }
        .LayoutFooter .row { padding: 0; }
    .footer-columns-right { width: 100%; padding-right: 0; }
    .footer-columns-left { width: 100%; padding-right: 0; }
    .footer-columns-common { vertical-align: top; display: inline-block; width: 100%; padding: 8px 30px 8px 20px; border-bottom: solid 1px #e1e1e2; margin-bottom: 0; }
    .titletext-footer { line-height: 30px; }
    .titletext-footer, .Newsletter .SidebarTopTitle { font-size: 15px; }
    .content-footer { line-height: 30px; margin-bottom: 15px; }
    ul.MenuItem li { font-size: 14px; }
    .content-footer ul li { line-height: 30px; }
    .footer-columns-common { width: 100%; padding: 8px 30px 8px 20px; border-bottom: solid 1px #e1e1e2; margin-bottom: 0; }
    .menu-toggle { background: url(../TakraOnlineWebsite/Images/Bullet/footer-toggle-show.svg) no-repeat right center; cursor: pointer; }
    .content-toggle { display: none; }
    .content-footer ul { clear: left; list-style: none; margin: 0; line-height: 24px; padding: 10px 0 0; }
    .footer-columns-myaccount { padding-bottom: 8px; border-bottom: solid 1px #e1e1e2; margin-bottom: 8px; }
    .footer-columns-service-partner { width: 100%; margin-bottom: 0; padding: 0; }
    .footer-columns-partner, .footer-columns-service { width: 100%; margin-bottom: 0; clear: left; }
    .footer-columns-followus, .footer-columns-blog { width: 100%; margin-bottom: 15px; display: inline-block; padding: 8px 10px 8px 20px; }
    .footer-columns-social { width: 100%; float: left; margin-bottom: 15px; clear: left; }
    .footer-facebook-likebox { width: 100%; padding-top: 40px; }
        .footer-facebook-likebox .SideBannerLeft { display: table; margin: auto; }
    .SocialLink, .DBDIcon, .common-button { display: table; margin: auto; float: none; }
    .footer-columns-followus, .footer-columns-blog { text-align: center; margin: auto; }
    .kb-hub-title { background-position-x: center; }
    .kb-hub-button { clear: left; float: left; width: 100%; margin: 10px 0; }
        .kb-hub-button a { z-index: 0; transition: background 0.5s ease-out; line-height: 30px; min-height: 36px; text-decoration: none; color: #fff; font-family: Prompt-Medium; padding: 5px 25px; font-size: 14px; width: 210px !important; }
    .LayoutFooterLicense { border-color: #e1e1e2; line-height: 18px; height: auto; }
        .LayoutFooterLicense .row { text-align: left; padding: 10px; }
    .FooterLicenseDiv { text-align: center; float: none; clear: left; display: block; }
    .logofooter { clear: left; float: left; top: 0; margin: 8px 0; width: 100%; background-position-x: center; background-size: contain; }
    .sticky-contact-tool { display: none; }
    .content-footer > .btn-update { position: relative; left: 50%; transform: translateX(-50%); }
    /* END Footer */
    .BtnStyle1, .BtnStyle2, .BtnStyle3, .BtnStyle4, .BtnLink, .AddToCartContinue, .AddCart, .ViewDetail { float: none; width: 100%; }
    .signup-popup-panel { width: 320px; }
        .signup-popup-panel .input-row.title .title { font-size: 28px; }
        .signup-popup-panel .input-row.title .sub-title { font-size: 20px; }
    .content-footer .kb-hub-button .common-button { width: auto; }
    .FrontMaster { padding-top: 55px; }

    .adword-header .logo a { left: 50%; transform: translateX(-50%); }

    /*#region Form SalePage*/
    .SeminarFormPanel { clear: left; display: table; width: 90%; margin: 15px auto; }
    /*#endregion Form SalePage*/

    .bg-salepage-get-discount-footer .bg-pro1900-ads-7 { margin-bottom: 60px; }

    .AddToCartPanel { width: 450px; max-width: 90%; }
    .AddToCartImage { width: 20%; }
    .AddToCartPrice { float: right; width: 70%; clear: right; margin-top: 10px; }
    .AddToCartPanel .PiceValue { line-height: 24px; }
    .AddToCartName { float: right; width: 70%; }
    .AddToCartPanel .CommonValue { margin-bottom: 0; line-height: 20px; }
    .AddToCartPanel .CommonLabel { margin-bottom: 0; line-height: 24px; }
    .AddToCartPanel a.AddCart { width: 47%; font-size: 16px; }
    .AddToCartContinueButton { width: 47%; font-size: 16px; }

    .SidebarTop { text-align: center; }
    .CommonPageRight, .CommonLoginPageRight, .ContentLayoutRight { padding-top: 15px; }
    ul.root li.parent > a.root-link { margin: 10px 0 15px; }
    ul.root-1 { margin-left: 10px; }

    .countContent { display: table; margin: 0 auto; top: 0; position: relative; float: none; }
    .ContentLayout ul li { background-position-y: 10px; }
    .ContentMenuSitemapPanel { font-size: 12px; }
    span.sitemap-seperator { font-size: 12px; }
    ul.root li.parent { margin-bottom: 13px; }


    /* Blog */
    .BlogFrontMaster { padding-top: 55px; }
    .BlogListTop { margin-bottom: 14px; }
    .BlogListItem, .BlogRelatedListPanel .BlogListItem { width: 100%; margin: 0 0 5px; padding: 0; clear: left; float: left; border-top: solid 2px #dfdfe0; }
    .BlogListItemImage { width: 49%; min-height: 0; max-height: none; float: left; margin-top: -2px; }
    .BlogListItem:nth-child(1) .BlogListItemImage { width: 100%; }
    .BlogListItem:nth-child(1) .BlogListItemName { width: 100%; font-size: 20px; margin-top: 10px; }
    .BlogListItemImage a img { max-height: inherit; max-width: 100%; }
    .BlogListItemName { width: 49%; clear: none; float: right; margin: 15px 0; font-size: 16px; line-height: 1.2; }
    .BlogListItemDate { font-size: 12px; }
    .BlogDetailsDefaultBlogContentDiv p > img { width: 100% !important; height: 100% !important; }
    .BlogFormView tbody { border: 0;}
    .BlogDetailInfo { width: 100%; padding-right: 0; }
    .BlogDetailsImage { width: 100%; }
    .BlogDetailCategory { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; width: 100%; }
    .BlogDetailsDefaultPublisherDiv { margin: 15px 0; font-size: 15px;}
    .BlogDetailsDefaultBlogContentDiv { border: 0; padding-top: 10px; margin-bottom: 0; }
    .BlogDetailsSocialButton { display: none; }
    .BlogDetailsDefaultTagsCategoryDiv { width: 100%; }
    .BlogDetailsRight { padding-top: 0; }
    .BlogDetailTitle { font-size: 22px;}
    .ArchiveBox, .BlogCategoryBox, .SearchBox { display: none; }
        .SearchBox .SidebarTop, .BlogSidebarTop { min-height: 20px; }
    .BlogSidebarTop { text-align: left; }
    .RecentPost { padding: 10px 0; border-top: 0; }
        .RecentPost .BlogSidebarTop, .RecentPost .BlogSidebarRight { border-bottom: 0; padding: 12px 0; }
        .RecentPost .ImageRecentPost { width: 45%; height: 145px; }
            .RecentPost .ImageRecentPost img { max-height: 145px; }
    /* End Blog */
}