﻿
/*------------------ Custom Responsive Layout ------------------*/

@media only screen and (min-width: 1200px) {
 
    .NewsEventList { display: flex; margin-left: -10px; width: calc(100% + 20px); flex-wrap: wrap; }
    .NewsEventItemStyle { width: calc(33.33% - 20px); float: left; margin: 20px 10px; }
    .NewsEventImage { height: 250px; }

    .ContentBannerContainer { padding-top: 60px; padding-bottom: 100px; }
    .ContentBannerFullWidth .ContentBannerImage iframe { width: 640px; height: 360px; }
    .ContentBannerParent.WithImage .row { min-height: 380px; }
    .ContentBannerPanel iframe { height: 330px; width: 100%; }
    .ContentBannerheader { font-size: 32px; }
    .ContentBannerparagraph { font-size: 17px; }
        .ContentBannerparagraph p { font-size: 17px; }
    .ContentBanner3 .row { min-height: 400px; }

    .FeaturedMerchantsAd iframe { height: 252px; }
    .FeaturedMerchantsTitle { font-size: 22px; }

    .DefaultMaster .FrontMasterMiddle { padding-top: 60px; } 
    .header-container1 .row { padding: 15px 10px; }
    .header-container1-left { float: left; max-width: 68%; }
    .HeaderMenu ul li a.HyperLink { padding: 5px 0; line-height: 30px; font-size: 20px; margin-left: 26px; margin-right: 26px; }
    .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { padding: 5px 0; line-height: 30px; font-size: 20px !important; margin-left: 26px; margin-right: 26px; }

    .SocialSection .SocialLink a { line-height: 28px; width: 32px; height: 32px; font-size: 20px; }  
    .icon-contact { font-size: 24px; width: 32px; height: 32px; }

    .SwitchLanguage { margin-top: 5px; }
    .ContactMap { height: 480px; } 

    .footer-columns-common.Location { width: 34%;}
    .footer-columns-common.Contact { width: 34%; }
    .footer-columns-common.Followus { width: 32%; }

    .content-footer { line-height: 27px; font-size: 16px; }
        .content-footer ul li { line-height: 25px; }

    .FooterStoreLogo img { max-height: 95px; }
    .LayoutFooterMenu .HeaderMenu ul li a.HyperLink { margin-left: 40px; margin-right: 40px; }
    .LayoutFooterMenu .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { margin-left: 40px; margin-right: 40px; }
}


@media only screen and (min-width: 980px) and (max-width: 1199.99px) {
    .header-container1 .row { padding: 12px 10px; }
    .header-container1-left { float: left; max-width: 80%; }
    .HeaderMenu ul li a.HyperLink { padding: 8px 0; line-height: 24px; font-size: 18px; margin-left: 13px; margin-right: 13px; }
    .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { padding: 8px 0; line-height: 24px; font-size: 18px !important; margin-left: 13px; margin-right: 13px; }

    .DefaultMaster .FrontMasterMiddle { padding-top: 50px; } 
    .SocialSection .SocialLink a { line-height: 24px; width: 28px; height: 28px; font-size: 18px; } 
    .icon-contact { font-size: 22px; width: 28px; height: 28px; }

    .SwitchLanguage { margin-top: 2px; }

    .NewsEventList { display: flex; margin-left: -5px; width: calc(100% + 10px); flex-wrap: wrap; }
    .NewsEventItemStyle { width: calc(33.33% - 10px); float: left; margin: 20px 5px; }
    .NewsEventImage { height: 207px; }

    .FeaturedMerchantsAd iframe { height: 202px; }
    .FeaturedMerchantsTitle { font-size: 22px; } 
    .ContentBannerContainer { padding-top: 30px; padding-bottom: 60px; }
    .ContentBannerParent.WithImage .row { min-height: 310px; }
    .ContentBannerPanel iframe { height: 270px; width: 100%; }
    .ContentBannerheader { font-size: 28px; }
    .ContentBannerparagraph { font-size: 17px; }
        .ContentBannerparagraph p { font-size: 17px; }
    .ContentBanner3 .row { min-height: 350px; } 

    .ContactMap { height: 450px; }

    .FooterStoreLogo img { max-height: 80px; }
    .LayoutFooterMenu .HeaderMenu ul li a.HyperLink { margin-left: 22px; margin-right: 22px; }
    .LayoutFooterMenu .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { margin-left: 22px; margin-right: 22px; }
    .footer-columns-common.Location { width: 35%; }
    .footer-columns-common.Contact { width: 35%; }
    .footer-columns-common.Followus { width: 30%; }
    .content-footer { line-height: 27px; font-size: 15px; }
        .content-footer ul li { line-height: 25px; }
}

@media only screen and (min-width: 980px) {

    .header-container2 .row { padding: 5px 10px; }
    .header-container2-left { float: left; width: 27%; }
    .header-container2-right { float: right; width: 73%; } 
    .HeaderLogo img { max-height: 80px; }
    .sticky-menu .HeaderLogo img { max-height: 60px; } 
    .SocialSection .SocialLink a { color: #fff;   padding: 2px 0; float: left; margin: 0 2px; } 
        .SocialSection .SocialLink a:hover { color: #fff; }

    .NewsTopicLink { font-size: 22px; } 
    .NewsDescription { font-size: 18px; }
        .NewsDescription p { font-size: 18px; }
    .NewsDate { font-size: 16px; }
    .NewsEventImageLink { line-height: 30px; font-size: 16px; } 

    .CenterBlockTopTitle { font-size: 32px; line-height: 1.5; }
    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .PromotionIteSocialLinkm .SidebarTopTitle, .BlogListTop .BlogDetailsTopTitle { font-size: 32px; }

    .ContentBannerParent .row { padding: 0 10px; }
    .ContentBannerParent .ContentBanner { width: calc(50% - 40px); margin-left: 30px; margin-right: 10px; padding-top: 20px; padding-bottom: 20px; }
    .ContentBannerButton a { font-size: 16px; padding: 7px 15px; margin-top: 10px; }
    .ContentBannerparagraph h1 { font-size: 30px; }
    .ContentBannerparagraph h2 { font-size: 28px; }
    .ContentBannerparagraph h3 { font-size: 26px; } 
    .ContentBanner3 .ContentBannerparagraph p { line-height: 1.8; }

    .FeaturedMerchants { padding-top: 20px; padding-bottom: 20px; }
    .FeaturedMerchantDiv { width: calc(33.33% - 20px); margin-left: 10px; margin-right: 10px; float: left; }
    .FeaturedMerchantsTitle { padding: 20px 5px; line-height: 1.6; }

    .Newsletter { padding-top: 60px; padding-bottom: 60px; }
    .NewsletterTitle { font-size: 24px; }
    .NewsletterLabel { font-size: 18px; }
    .NewsletterForm { padding: 5px; }
    input[type="text"].NewsletterTextBox { width: 70%; height: 50px; padding: 10px 20px; font-size: 18px; }
    .NewsletterSubmit.BtnStyle1 { line-height: 50px; width: 30%;  font-size: 20px; }

    .ContentLayoutRight { font-size: 16px; }
        .ContentLayoutRight p { font-size: 16px; }

    .BlogDetailsDefaultBlogContentDiv { font-size: 16px; }
        .BlogDetailsDefaultBlogContentDiv p { font-size: 16px; }


    .IntroductionMessagePanel { padding-top: 10px; padding-bottom: 10px; }
    .IntroductionMessage { font-size: 22px; }
        .IntroductionMessage p { font-size: 22px; }
        .IntroductionMessage h1 { font-size: 36px; }
        .IntroductionMessage h2 { font-size: 33px; }
        .IntroductionMessage h3 { font-size: 28px; }
        .IntroductionMessage h5 { font-size: 26px; }
        .IntroductionMessage h6 { font-size: 24px; }

    .SimplyInfo H1 { font-size: 30px; }
    .SimplyInfo H2 { font-size: 27px; }
    .SimplyInfo H3 { font-size: 24px; }
    .SimplyInfo p { font-size: 18px; line-height: 28px; }

    .LayoutFooter { padding-top: 30px; padding-bottom: 50px; }
        .LayoutFooter .SocialLink a {  line-height: 30px; width: 38px; height: 38px; font-size: 24px; padding: 4px 0;  } 
    .FooterStoreLogo { padding-top: 25px; padding-bottom: 25px; text-align: center; }
    .LayoutFooterMenu { padding-top: 20px; padding-bottom: 20px; text-align: center; }

    .ContactUsBlock { padding: 20px; width: 50%; }
}

@media only screen and (max-width: 979px) {
    /*--- HeaderMenu ---*/
    .headerMenuNormal { display: block; }
    .headerMenuResponsive { display: none; }

    .SideMenu.Active { width: 320px; z-index: 16000003; }
    .SwitchLanguageMenuPanel { color: #fff; font-size: 14px; }
        .SwitchLanguageMenuPanel a { color: #fff; }
            .SwitchLanguageMenuPanel a:hover { color: #1ab6ff; }
             
    .titletext-footer { font-size: 18px; }
    .content-footer { font-size: 15px; line-height: 25px; }
        .content-footer ul li { font-size: 15px; line-height: 25px; }
        .content-footer p { font-size: 15px; line-height: 25px; }
        .content-footer ul { line-height: 25px; }
        .content-footer .contact-li i { width: 30px; font-size: 18px; }
        .content-footer .CompanyName { font-size: 16px; }

    .CenterBlockTopTitle { font-size: 30px; line-height: 1.5; }

    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .PromotionIteSocialLinkm .SidebarTopTitle, .BlogListTop .BlogDetailsTopTitle { font-size: 28px; } 
    .ContentLayoutRight p { font-size: 15px; line-height: 28px; } 

    .HeaderMenuToggle { display: block; width: 10%; }
    .header-container2 .row { padding-top: 5px; padding-bottom: 5px; }
    .header-container2-left { width: 80%; text-align: center; }
    .header-container2 .HeaderMenuPanel { display: none; visibility: hidden; line-height: 0; width: 0; height: 0; }
    .header-container1-right { display: none; visibility: hidden; line-height: 0; width: 0; height: 0; }
    .HeaderLogo img { max-height: 55px; }
    .sticky-menu .HeaderLogo img { max-height: 50px; }
     
    .header-container1 .row { padding: 8px 10px; text-align: center; }
    .header-container1-left { float: none; display: inline-block }
    .icon-contact { font-size: 20px; width: 26px; height: 26px; }

    .HeaderMenu ul li a.HyperLink { padding: 5px 0; line-height: 24px; font-size: 18px; margin-left: 15px; margin-right: 15px; }
    .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { padding: 5px 0; line-height: 24px; font-size: 18px !important; margin-left: 15px; margin-right: 15px; }

    .LayoutFooter .SocialLink a { line-height: 26px; width: 34px; height: 34px; font-size: 22px; padding: 4px 0; } 
}

@media only screen and (min-width: 768px) and (max-width: 979.99px) {
    .ContentBannerParent.FullWidthPanel { min-height: 210px; }
    .ContentBannerContainer { padding-top: 30px; padding-bottom: 50px; }
    .ContentBannerParent .row { padding-left: 5px; padding-right: 5px; }
    .ContentBannerParent.WithImage .row { min-height: 250px; }
    .ContentBannerPanel iframe { height: 210px; width: 100%; }
    .ContentBannerButton a { font-size: 15px; padding: 5px 12px; margin-top: 10px; }
    .ContentBannerheader { font-size: 26px; }
    .ContentBannerparagraph h1 { font-size: 24px; font-weight: 600; }
    .ContentBannerparagraph h2 { font-size: 22px; font-weight: 600; }
    .ContentBannerparagraph h3 { font-size: 20px; font-weight: 600; }
    .ContentBannerparagraph { font-size: 15px; }
        .ContentBannerparagraph p { font-size: 15px; }
    .ContentBannerParent .ContentBanner { width: calc(50% - 40px); margin-left: 20px; margin-right: 20px; padding-top: 20px; padding-bottom: 20px; }
    .ContentBanner3 .row { min-height: 320px; padding: 10px; }
    .ContentBanner3.FullWidthPanel .ContentBannerheader { font-size: 30px; line-height: 1.5; }
    .ContentBanner3.FullWidthPanel .ContentBannerparagraph { font-size: 16px; line-height: 1.8; }
        .ContentBanner3.FullWidthPanel .ContentBannerparagraph p { font-size: 16px; line-height: 1.8; }
    .NewsEvent { padding-top: 25px; padding-bottom: 25px; }
    .NewsEventList { display: flex; margin-left: -5px; width: calc(100% + 10px); flex-wrap: wrap; }
    .NewsEventItemStyle { width: calc(33.33% - 10px); float: left; margin: 20px 5px; }
    .NewsEvent .CenterBlockTopTitle { font-size: 30px; }
    .NewsEventTitleSub { font-size: 16px; }
    .NewsEventImage { height: 162px; }
    .NewsEventImageLink { line-height: 22px; font-size: 14px; border-width: 2px; }
    .NewsTopicLink { font-size: 18px; }
    .NewsDescription { font-size: 15px; }
        .NewsDescription p { font-size: 15px; }
    .NewsDate { font-size: 14px; }

    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .NewArrivalCategory .NewArrivalTitle, .CatalogName, .BlogDetailsTopTitle, .PromotionItem .SidebarTopTitle, .CheckoutIndicatorTable .CurrentPageTitle span, .BlogListTop .BlogDetailsTopTitle, .CenterBlockTopTitle, .AllBrandsTitle, .AllDepartmentsTitle, .PromotionItem .SidebarTopTitle, .VendorList .CommonPageTopTitle, .BlogDetail-TopTitle { font-size: 28px; }


    .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li { width: 15px; height: 15px; }
        .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li > span, .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li.cameracurrent > span { width: 15px; height: 15px; }
    .FeaturedMerchants { padding-top: 10px; padding-bottom: 10px; }
    .FeaturedMerchantDiv { width: calc(33.33% - 10px); margin-left: 5px; margin-right: 5px; float: left; }
    .FeaturedMerchantsTitle { padding: 15px 5px; font-size: 20px; line-height: 1.6; }

    .Newsletter { padding-top: 40px; padding-bottom: 40px; }
    .NewsletterTitle { font-size: 22px; }
    .NewsletterLabel { font-size: 16px; }
    .NewsletterForm { padding: 3px; }
    input[type="text"].NewsletterTextBox { width: 68%; height: 40px; padding: 5px 10px; font-size: 15px; }
    .NewsletterSubmit.BtnStyle1 { line-height: 40px; width: 32%; font-size: 16px; }

    .LayoutFooter { padding-top: 25px; padding-bottom: 25px; }
    .footer-menu .HeaderMenu ul li a.HyperLink { font-size: 18px; margin: 5px 15px; }
    .footer-menu .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { margin: 5px 15px; font-size: 18px !important; }
    .footer-columns-common.Location { width: 50%; }
    .footer-columns-common.Contact { width: 50%; }
    .footer-columns-common.Followus { width: 50%; margin-left: 25%; margin-right: 25%;}

    .ContentLayoutRight { font-size: 16px; }
        .ContentLayoutRight p { font-size: 16px; }
         
    .ContactMap { height: 360px; }
    .ContactUsBlock { padding: 20px 10px; width: 50%; }

    .BlogDetailsDefaultBlogContentDiv { font-size: 16px; }
        .BlogDetailsDefaultBlogContentDiv p { font-size: 16px; }

    .IntroductionMessagePanel { padding-top: 20px; padding-bottom: 20px; }
    .IntroductionMessage h1 { font-size: 32px; }
    .IntroductionMessage h2 { font-size: 28px; }
    .IntroductionMessage h3 { font-size: 26px; }
    .IntroductionMessage { font-size: 18px; }
        .IntroductionMessage p { font-size: 18px; }

    .FooterStoreLogo { padding-top: 15px; padding-bottom: 15px; text-align: center; }
    .LayoutFooterMenu { padding-top: 10px; padding-bottom: 10px; text-align: center; }
    .FooterStoreLogo img { max-height: 70px; }
    .HeaderLogo img { max-height: 60px; }
    .DefaultMaster .FrontMasterMiddle { padding-top: 40px; } 

}

@media only screen and (min-width: 768px) {

    .DefaultMaster .FrontMasterTop { position: absolute; z-index: 2; background: transparent }
    .DefaultMaster .header-container2 { background-color: rgba(127,161,178,0.7); }

    .DefaultMaster .sticky-menu.header-container2 { background-color: rgba(75, 103, 118, 0.8); }
    .HeaderMenu ul li { border-bottom: solid 1px #fff; }
        .HeaderMenu ul li a.HyperLink { color: #fff; text-transform: uppercase; }
        .HeaderMenu ul li a.ContentMenuNavListStaticMenuItem { color: #fff }
        .HeaderMenu ul li a.HyperLink:hover, .HeaderMenu ul li:hover a.ContentMenuNavListStaticMenuItem { color: #1ab6ff; }
        .HeaderMenu ul li:hover { border-color: #1ab6ff }
         

    .LanguageSection { float: right; }
    .SocialSection { float: left; color: #fff; display: flex; align-items: center }
    .HeaderSocialLabel { float: left; margin-right: 10px; } 

    .footer-columns-common.Location {  float: left; margin: 15px 0; }
    .footer-columns-common.Contact { text-align: right;  float: right; margin: 15px 0; }
    .footer-columns-common.Followus { text-align: center; float: left; margin-top: 15px; margin-bottom: 15px; }


    .ContentBannerParent .row{ display: flex; align-items: center; flex-wrap: wrap; }
        .ContentBannerParent:nth-child(2n) .row { flex-direction: row-reverse; }
            .ContentBannerParent:nth-child(2n) .ContentBannerPanel { width: 50%; text-align: left; }
        .ContentBannerParent:nth-child(2n+1) .ContentBannerPanel { width: 50%; text-align: right; }
        .ContentBannerParent.FullWidthPanel .row { padding: 20px; }


    .TableContainer { display: flex; align-items: center; margin-bottom: 20px }
    .TableDiv.two-cols { display: flex; }
    .TableStyle { border-spacing: 5px; margin-bottom: 5px; }
        .TableStyle.w50 { width: calc(50% - 10px); margin-right: 10px; float: left; clear: none }
        .TableStyle th { padding: 8px 15px; line-height: 1.3; font-size: 20px; }
        .TableStyle td { padding: 8px 15px; line-height: 1.3; font-size: 15px; }
        .TableStyle.text-left td { text-align: left; }


    .CombineFeatures { clear: left; float: left; width: 100%; background: #0c496c; background: linear-gradient(to bottom, #0c496c 0%, #6e92a8 70%,#f1f8fd 70%,#f1f8fd 100%); }
        .FeaturedMerchants .row { padding-left: 0; padding-right: 0; }
        .FeaturedMerchants .CenterBlockRight { display: flex; width: 100%; }


    .NewsletterLeft { width: 50% }
    .NewsletterRight { width: 50%; padding-top: 10px; padding-bottom: 10px; }
    /* StoreBanner Begin*/

    .StoreBanner { width: 100%; display: inline-block; background-color: #0c496c; }
        .StoreBanner .camera_caption { text-align: center; bottom: 48px; }
            .StoreBanner .camera_caption > div { background: rgba(64, 99, 115, 0.8); padding: 15px; }
                .StoreBanner .camera_caption > div > span { font-size: 15px; }
        .StoreBanner .camera_wrap { margin-bottom: -5px !important; }
            .StoreBanner .camera_wrap .camera_fakehover .camera_pag { bottom: 25px; }
                .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul { text-align: center }
                    .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li { background-color: #f0f0f0; width: 22px; height: 22px; margin: 3px; border-radius: 30px; }

                        .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li > span, .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li.cameracurrent > span { background: none; left: 0; top: 0; width: 22px; height: 22px; border-radius: 30px; }

                        .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li:hover > span { background-color: #1ab6ff; }

                        .StoreBanner .camera_wrap .camera_fakehover .camera_pag .camera_pag_ul li.cameracurrent { background-color: #1f3540; }

    .banner-div { position: relative; width: 100%; text-align: center; }
    .banner-caption { position: absolute; bottom: 0; background: rgba(64, 99, 115, 0.8); padding: 15px; width: 100%; text-align: center; color: #fff; font-size: 16px; font-weight: 500; }

    .MobileBanner { display: none; }

    .NewsEvent { margin-top: 50px; padding-top: 40px; padding-bottom: 40px; }
    .NewsEventTitleSub { font-size: 18px; }
    .NewsEventViewAllLink { font-size: 14px; }
    .NewsEventViewAll { position: absolute; right: 10px; top: 20px; text-align: right; } 

    .IntroductionMessagePanel hr { height: 3px; width: 240px; margin-top: 10px; margin-bottom: 15px; }

    .ContactUs .CommonPageInnerTitle { font-size: 20px; }
    .ContactUsLabel { line-height: 25px; font-size: 16px; }
    .ContactUsData { line-height: 25px; font-size: 16px; }
    .ContactUsBlock table { width: 480px; line-height: 25px; font-size: 16px; } 


    .MaintenanceTitle { font-size: 26px; }
    .MaintenanceText { font-size: 16px; }
        .MaintenanceText p { font-size: 16px; }

    h1 { font-size: 30px; }
    h2 { font-size: 28px; }
    h3 { font-size: 26px; }
    h4 { font-size: 24px; }
    h5 { font-size: 22px; }
    h6 { font-size: 20px; } 

    .SimplyContainer { padding-top: 30px; padding-bottom: 30px; display: flex; align-items: center; }
    .SimplyImage { width: calc(50% - 20px); margin-right: 20px; }
    .SimplyInfo { width: 50%; padding-left: 20px; padding-right: 20px }
        .SimplyInfo a { margin-top: 20px; }
    .SimplyContainer:nth-child(2n-1) .SimplyImage { margin-left: 20px; }
    .SimplyContainer:nth-child(2n-1) { flex-direction: row-reverse; }
        .SimplyContainer:nth-child(2n-1) .SimplyImage { margin-right: 0 }
        .SimplyContainer:nth-child(2n-1) .SimplyInfo { padding-left: 0; }
    .SimplyContainer:last-child { border-bottom: 0 }
    .BlogListTop { padding-top: 15px; }
    .CommonPageTop, .CommonLoginPageTop, .ContentLayoutTop, .PromotionItem .SidebarTop { padding-top: 15px; }
     
    .MapLocation { padding-top: 20px; padding-bottom: 40px; }
        .MapLocation .CenterBlockTop { margin-bottom: 20px; }

    .BlogListViewMore .ViewMoreLink { font-size: 15px; line-height: 24px; } 
}

@media only screen and (max-width: 767px) {
     
    .MainDivLeft { display: none; }

    .ContentMainDiv .common-center-col { float: none; }

    /*--- Category & Product Item ---*/
    .ContentMenuNavMenuListDynamicMenuStyle { display: none !important; }

    /*KeyValidateError Begin*/
    .KeyValidateError { -webkit-background-size: auto 100%; -moz-background-size: auto 100%; -o-background-size: auto 100%; background-size: auto 100%; padding: 70px 0; font-size: 16px; line-height: 30px; }

        .KeyValidateError h1 { margin: 20px 0; font-size: 24px; }

    .short-bar-white { margin: 40px auto; }
    /*KeyValidateError End*/

    .StoreBanner { display: none; }
    .MobileBanner .swiper-pagination-bullet { background: #fff !important; width: 16px; height: 16px; opacity: 1; }
        .MobileBanner .swiper-pagination-bullet:hover { background: #1ab6ff !important; }
    .MobileBanner .swiper-pagination-bullet-active { background: #1f3540 !important; }

    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .NewArrivalCategory .NewArrivalTitle, .CatalogName, .BlogDetailsTopTitle, .PromotionItem .SidebarTopTitle, .CheckoutIndicatorTable .CurrentPageTitle span, .BlogListTop .BlogDetailsTopTitle, .CenterBlockTopTitle, .AllBrandsTitle, .AllDepartmentsTitle, .VendorList .CommonPageTopTitle { font-size: 28px; }


    /*ContentBreadcrumb Begin*/
    .CatalogBreadcrumbDiv { width: 100%; padding: 5px 0; border-bottom: solid 1px #cccccc; margin-bottom: 10px; }
    .ContentMenuSitemapDiv { width: 100%; padding: 5px 0; border-bottom: solid 1px #cccccc; }
        .CatalogBreadcrumbDiv .row .columns, .ContentMenuSitemapDiv .row .columns { background-color: #fff; padding: 0; }
    .ContentMenuSitemapPanel { font-size: 12px; line-height: 20px; }
    span.sitemap-seperator { width: 20px; font-size: 12px; }
    .CatalogBreadcrumb { font-size: 12px; }
    /*ContentBreadcrumb End*/ 

    .NewsEvent { padding-top: 20px; padding-bottom: 30px; }
    .NewsEventItemStyle { width: 100%; display: flex; align-items: center; border-bottom: solid 2px #92a6b3; margin: 0; padding-top: 5px; padding-bottom: 5px; }
        .NewsEventItemStyle:nth-child(3n-2) { padding-right: 0; }
        .NewsEventItemStyle:nth-child(3n-1) { padding-right: 0; padding-left: 0; }
        .NewsEventItemStyle:nth-child(3n) { padding-left: 0; }
    .NewsEventImage { width: 45%; float: left; }
    .NewsInfo { width: 55%; clear: none; padding-left: 15px; float: left; text-align: left; font-size: 14px; line-height: 20px; margin-top: 5px; margin-bottom: 5px; }
    .NewsEventItemStyle:nth-child(1) { width: 100%; display: block; align-items: initial; padding-bottom: 15px; }
        .NewsEventItemStyle:nth-child(1) .NewsEventImage { width: 100%; }
        .NewsEventItemStyle:nth-child(1) .NewsInfo { width: 100%; padding-left: 0; text-align: center; }
        .NewsEventItemStyle:nth-child(1) .NewsTopicLink { text-align: center; }
        .NewsEventItemStyle:nth-child(1) .NewsEventImageLink { padding: 8px 20px 6px; font-size: 15px; }
    .NewsEventViewAll { width: 100%; text-align: center; margin-top: 20px; clear: both; float: left; }
    .NewsEventViewAllLink { font-size: 14px; text-align: center; display: inline-block; }  

    .FeaturedMerchants { padding-top: 30px; padding-bottom: 10px; }
    .FeaturedMerchantDiv { width: 100%; float: left; clear: left; margin-bottom: 20px; }
        .FeaturedMerchantDiv:last-child{ margin-bottom: 0 }
        .FeaturedMerchantsTitle { font-size: 22px; line-height: 1.4; padding: 14px 0; font-weight: 500; }
    .FeaturedMerchantsAd { margin-bottom: 0; }
        .FeaturedMerchantsAd iframe { height: calc(450px * 0.5625); }

    .header-container1 .row { max-width: 100%; width: 100%; padding-top: 5px; padding-bottom: 5px; }
    .header-container2 .row { max-width: 100%; width: 100%; padding-left: 10px; padding-right: 10px; }
    .phone-contact, .email-contact { display: none; visibility: hidden; line-height: 0; width: 0; height: 0; }

    .LanguageSection { float: right; clear: none; margin: 0; }
    .SwitchLanguageDropPanel { margin-top: 0; }
    .LanguageSwitch select { font-size: 14px; height: 28px; }

    .ContentBannerParent { margin-top: 10px; margin-bottom: 10px; }
        .ContentBannerParent .row { padding: 10px; }
        .ContentBannerParent.WithImage .row { min-height: 300px; }
        .ContentBannerParent .ContentBanner { width: 100%; text-align: center; padding: 20px 10px; }
        .ContentBannerParent .ContentBannerPanel { width: 100%; text-align: center; }
    .ContentBannerContainer { padding-bottom: 30px; }
    .ContentBanner1.FullWidthPanel { padding: 10px 0; }
    .ContentBanner2.FullWidthPanel { padding: 10px 0; }

    .ContentBanner1.FullWidthPanel .ContentBanner { padding: 20px; margin: 10px 0; }
    .ContentBanner2.FullWidthPanel .ContentBanner { padding: 20px; margin: 10px 0; }
    .ContentBanner3.FullWidthPanel { background-size: cover; margin: 0; }
        .ContentBanner3.FullWidthPanel .ContentBannerheader::after { height: 2px; width: 320px; position: absolute; content: ""; box-shadow: 1px 2px 2px #000; border: 0; background-color: #1ab6ff; left: 0; right: 0; bottom: 0; content: ""; transform: scaleX(1); margin-left: auto; margin-right: auto; }

    .ContentBannerParent.ContentBanner3 .row { padding: 10px; }
    .ContentBanner { padding: 30px 10px; }
    .ContentBannerButton { margin-top: 15px; }
    .ContentBannerButton a { font-size: 14px; padding: 7px 15px; }

    .TableContainer { clear: left; float: left; width: 100%; margin-bottom: 20px; }
    .TableStyle { border-spacing: 5px; margin-bottom: 10px; }
        .TableStyle th { padding: 8px 10px; line-height: 1.3; font-size: 16px; }
        .TableStyle td { padding: 8px 10px; line-height: 1.3; font-size: 14px; }
        .TableStyle.text-left td { text-align: left; }

    .Newsletter { padding-top: 20px; padding-bottom: 20px; }
    .NewsletterLeft { width: 100%; text-align: center; }
    .NewsletterRight { width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; }
    .NewsletterForm { padding: 3px; float: none; margin: auto; }
    .NewsletterTitle { font-size: 20px; display: inline-block; float: none; }
    .NewsletterLabel { font-size: 15px; }
    input[type="text"].NewsletterTextBox { width: 68%; height: 36px; padding: 5px 10px; font-size: 14px; }
    .NewsletterSubmit.BtnStyle1 { line-height: 36px; width: 32%; font-size: 14px; }


    .LayoutFooter { padding-top: 20px; padding-bottom: 20px; }
        .LayoutFooter .row { width: auto; max-width: 100%; margin: 0 auto; }
    .LayoutFooterLogo { padding-top: 10px; padding-bottom: 20px; }
    .LayoutFooterMenu { display: none; visibility: hidden; line-height: 0; width: 0; height: 0; }

    .FooterStoreLogo { padding-top: 15px; padding-bottom: 15px; text-align: center; } 
    .FooterStoreLogo img { max-height: 60px; } 

    .titletext-footer {  text-align: center }

    .content-toggle { display: none; }
    .content-footer { text-align: center; margin-bottom: 15px; }
        .content-footer ul li { font-size: 15px; }
        .content-footer p { font-size: 15px; }
        .content-footer .CompanyName { font-size: 16px; }
    .footer-columns-common { width: 100%; clear: left; margin-top: 15px; margin-bottom: 15px; float: left !important; }
        .footer-columns-common.Contact .content-footer ul { position: relative; left: 50%; transform: translateX(-50%); float: left; }
    .footer-columns-followus { width: 100%; margin-bottom: 0; display: inline-block; padding: 8px 30px 8px 40px; }
        .footer-columns-followus .menutitle-footer { display: block; }

    .footer-menu .HeaderMenu ul li a.HyperLink { font-size: 13px; margin: 5px; border: solid 1px #fff; padding: 0 10px; }

    .ContentLayoutRight { font-size: 15px; }
        .ContentLayoutRight p { font-size: 15px; }
    .BlogDetailsDefaultBlogContentDiv { font-size: 15px; }
        .BlogDetailsDefaultBlogContentDiv p { font-size: 15px; }

    .ContactUs .ContactMap { height: 300px; }
    .ContactUs .CommonPageInnerTitle { font-size: 18px; } 
    .ContactUsBlock table { width: 100%; line-height: 22px; font-size: 14px; }  
    .ContactUsBlock { padding: 10px 0; line-height: 22px; font-size: 14px; } 

    .MapLocation { padding-top: 20px; padding-bottom: 20px; }
        .MapLocation .CenterBlockTop { margin-top: 0; margin-bottom: 20px;}
        .MapLocation .ContactMap { height: 280px; margin-top: 0; margin-bottom: 0; padding-bottom: 0; }

    h1 { font-size: 24px; }
    h2 { font-size: 23px; }
    h3 { font-size: 19px; }
    h4 { font-size: 18px; }
    h5 { font-size: 17px; }
    h6 { font-size: 16px; }
     
    .IntroductionMessagePanel { padding-top: 20px; padding-bottom: 20px;  background: #0c496c; background: linear-gradient(to bottom, #0c496c , #6e92a8); }
        .IntroductionMessagePanel .row { max-width: 100%; width: 100%; padding-left: 10px; padding-right: 10px; }
        .IntroductionMessagePanel hr { height: 2px; width: 200px; margin-top: 10px; margin-bottom: 10px; }
        .IntroductionMessage h1 { margin-top: 10px; margin-bottom: 10px; }
        .IntroductionMessage h2 { margin-top: 10px; margin-bottom: 10px; }
        .IntroductionMessage h3 { margin-top: 10px; margin-bottom: 10px; }

    .SimplyContainer { padding-top: 20px; padding-bottom: 20px; }
    .SimplyImage { clear: left; float: left; width: 100%; margin-bottom: 20px; }
    .SimplyInfo { clear: left; float: left; width: 100%; }
        .SimplyInfo a { font-size: 14px; margin-top: 10px; }
    .SimplyContainer iframe { height: 250px; width: 100%; }
    .SimplyInfo H1 { font-size: 22px; }
    .SimplyInfo H2 { font-size: 20px; }
    .SimplyInfo H3 { font-size: 18px; }
    .SimplyInfo p { font-size: 15px; }

    .BlogListTop { padding-top: 10px;  }
    .CommonPageTop, .CommonLoginPageTop, .ContentLayoutTop, .PromotionItem .SidebarTop { padding-top: 10px;  }
}

@media only screen and (min-width: 480px)and (max-width: 767.99px) {
  
    .NewsletterForm { width: 350px; }
    .CommonValidatorTextNewsLetter { width: 350px; left: 50px; }

    .ContentLayoutRight p { font-size: 16px; }
    .ContactMap { width: 100%; height: 260px; margin-top: 0; margin-bottom: 0; padding-bottom: 0; } 

    .IntroductionMessage h1 { font-size: 27px; }
    .IntroductionMessage h2 { font-size: 24px; }
    .IntroductionMessage h3 { font-size: 22px; }
    .IntroductionMessage { font-size: 16px; line-height: 1.6; }
        .IntroductionMessage p { font-size: 16px; line-height: 1.6; }
         
    .ContentBannerPanel iframe { width: 450px; height: 255px; }
    .ContentBannerheader { font-size: 26px; }
    .ContentBannerparagraph h1 { font-size: 26px; }
    .ContentBannerparagraph h2 { font-size: 24px; }
    .ContentBannerparagraph h3 { font-size: 21px; }
    .ContentBannerparagraph { font-size: 16px; }
        .ContentBannerparagraph p { font-size: 16px; }
         
    .FeaturedMerchantsAd iframe { height:  255px; }

    .ContactMap { height: 240px; }
    .ContentDataItem { width: calc(50% - 20px); margin: 10px; }

    .NewsEventImageLink { padding: 6px 12px 4px; font-size: 14px; }
    .NewsEventImage { height: 150px; } 
    .NewsTopic { margin-top: 8px; }
    .NewsTopicLink { font-size: 16px; text-align: left; }
    .NewsEventItemStyle:nth-child(1) .NewsEventImage { height: 300px; }
    .NewsEventItemStyle:nth-child(1) .NewsTopicLink { font-size: 20px; }
    .NewsEventItemStyle:nth-child(1) .NewsDescription { font-size: 16px; }

    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .NewArrivalCategory .NewArrivalTitle, .CatalogName, .BlogDetailsTopTitle, .PromotionItem .SidebarTopTitle, .CheckoutIndicatorTable .CurrentPageTitle span, .BlogListTop .BlogDetailsTopTitle, .CenterBlockTopTitle, .AllBrandsTitle, .AllDepartmentsTitle, .VendorList .CommonPageTopTitle, .BlogDetail-TopTitle { font-size: 24px; }

    .MaintenanceInnerDiv { width: 80%; }
    .MaintenanceTitle { font-size: 24px; }
    .MaintenanceText { font-size: 15px; }
        .MaintenanceText p { font-size: 15px; }

    .info-contact {  font-size: 13px; margin: 5px; }
}

@media only screen and (max-width: 479px) {

    .MaintenanceInnerDiv { width: 90vw; } 
    .MaintenanceTitle { font-size: 22px; }
    .MaintenanceText { font-size: 14px; }
        .MaintenanceText p { font-size: 14px; }

    .CommonPageTopTitle, .CommonLoginPageTitle, .ContentLayoutTopTitle, .NewArrivalCategory .NewArrivalTitle, .CatalogName, .BlogDetailsTopTitle, .PromotionItem .SidebarTopTitle, .CheckoutIndicatorTable .CurrentPageTitle span, .BlogListTop .BlogDetailsTopTitle, .CenterBlockTopTitle, .AllBrandsTitle, .AllDepartmentsTitle, .PromotionItem .SidebarTopTitle, .VendorList .CommonPageTopTitle, .BlogDetail-TopTitle { font-size: 24px; }

    .NewsletterForm { margin-left: 0; width: 100%; } 
     
    .CommonPage, .CommonLoginPage, .ContentLayout { margin-top: 0; margin-bottom: 0; }
    .MainDiv, .ContentMainDiv, .ProductMainDiv, .DefaultMainDiv, .AccountMainDiv { padding: 0 0 20px; } 

    .BlogNavList { margin: 0; }
    .tel-div { padding: 5px; }

    .IntroductionMessage h1 { font-size: 24px; }
    .IntroductionMessage h2 { font-size: 22px; }
    .IntroductionMessage h3 { font-size: 20px; }
    .IntroductionMessage { font-size: 15px; line-height: 1.6; }
        .IntroductionMessage p { font-size: 15px; line-height: 1.6; }


    .ContentBannerPanel iframe {  height: calc((100vw - 20px) * 0.5625); width: calc(100vw - 20px); }
    .ContentBanner1Div .ContentBannerheader { font-size: 24px; }
    .ContentBannerheader { font-size: 22px; margin-top: 10px; margin-bottom: 10px; }
    .ContentBannerparagraph { font-size: 15px; }
        .ContentBannerparagraph h1 { font-size: 24px; }
        .ContentBannerparagraph h2 { font-size: 22px; }
        .ContentBannerparagraph h3 { font-size: 20px; }
        .ContentBannerparagraph p { font-size: 15px; } 
         
    .NewsTopic { margin-top: 8px; margin-bottom: 8px; }
    .NewsTopicLink { font-size: 15px; text-align: left; }
    .NewsEventImage { height: calc(42vw * 0.667); }
    .NewsEventItemStyle:nth-child(1) .NewsEventImage { height: calc((100vw - 20px) * 0.667); }
    .NewsEventItemStyle:nth-child(1) .NewsTopicLink { font-size: 18px; }
    .NewsDate { font-size: 12px; }
    .NewsEventImageLink { padding: 5px 10px; font-size: 12px; }
    .NewsCategoryName { display: none; }
    .NewsDescription { display: none; }

    .FeaturedMerchants .row { max-width: 100%; width: 100%; }
    .FeaturedMerchantsAd iframe { height: calc(100vw * 0.5625); } 


    .LayoutFooterLicense { font-size: 12px; }
    .logofooter { height: 25px; }

    .ContactMap { height: calc(100vw * 0.5625); }
    .ContentDataItem { width: calc(100% - 20px); margin: 10px; }

    .HeaderLogo img { max-height: 50px;}
    .header-container1 { display: none; visibility: hidden; line-height: 0; width: 0; height: 0; }
}

@media only screen and (orientation: portrait) {
}
