.hide-br-on-mobile {display: none;}

#header.page-section {
    width: 100%;
}

#main {
    padding: 0px 40px;
}

.cp-home-top-hero .canada-icon {
    right: 137px !important;
}


.mob-head-wrap > div {
    position: relative;
    top: 39px;
    left: -18px;
    width: 340px;
}

        #header #logo {
            width: 270px;
            height: 77px;
        }

        #secondarynav {
            left: 22px;
        }

        #google_translate_placeholder_desktop {
            float: none !important;
        }

        .desktop-google-searchbox {
                    width: 220px !important;
        }

    .desktop-google-searchbox .gsc-input {        
        width: 168px !important;
    }

    #secondarynav li {
        padding-left: 35px;
    }

    #secondarynav li a {
        text-decoration: none;
        font: normal normal 600 14px / 16px Source Sans Pro;
        letter-spacing: -0.14px;
        color: #FFFFFF;
        opacity: 1;
    }

    .find-your-solution-audience .audience-grid {

        gap: 30px !important;

    }

    .find-your-solution-audience .audience-img {
               width: 100% !important;
        height: auto !important;
        overflow: hidden;
    }

    .home-page-blogpost .blog-list li:last-child {
        display: none;
    }

    .blog-list .blog-img img {
        width: 100% !important;
        height: auto ! IMPORTANT;
    }

    .blog-list {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 30px !important;
        row-gap: 35px !important;
    }

     .blog-list .first-featured-item {
            grid-column-start: 1;
            grid-column-end: 3;
            display: flex;
            column-gap: 0px;
            width: 100%;
        }

            .blog-list .first-featured-item img {
                width: 100%;
            }

.footblock {
    padding-top: 20px !important;
}

.socialmedia ul.social-icons-list li {
    margin: 0 2px;
}

.home-location-map .card--text {
    margin-top: 0px !important;
}

#footer-professionals #prof-left-col h3 {
text-align: left;
        font: normal normal bold 22px / 30px Lato;
        letter-spacing: 0px;
        color: #000000;
        opacity: 1;
                margin-top: 0px;

}


    #newsletter {
        float: left;
        clear: both;
    }

        .socialmedia {
            margin-bottom: 30px;
        }

        .footblock {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          width: 100%;
        }

        .socialmedia {           
            text-align: left;
        }

        #footer #copyright {
            float: none;
            text-align: center;
            border-right: 0px;
        }

        #footer #bottomlinks {
            text-align: center;
        }

    .yellow.page-overview #breadcrumb {
        
        width: 98%;
    }
    
    .yellow #professional-market-grid-container {
        padding: 40px 20px;
    }

    .yellow .top-paint-section,
    .yellow .bottom-paint-grid
    {
        padding: 0 20px !important;
    }

    .yellow .paint-colour-overview-content-block 
    {
        padding: 0 70px 0px 20px !important;
    }

    .yellow .overview-colour-note 
    {
        width: 75% !important;
    }

    .salesforce-form > div {
        padding-left: 0px;
    }

     #footer-professionals {
        display: flex;
            column-gap: 40px;
            flex-direction: column;
            margin-left: 0px !important;
    }

    #footer-professionals #prof-left-col {
        width: 100%;
    }

    #footer-professionals-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        flex-direction: row;
        gap: 35px;
    }

    .yellow.page-overview .professionals-overview-list ul {
        column-gap: 30px !important;
    }
    .yellow.page-overview .professionals-overview-list ul li {
        min-height: 340px;
        width: 48%;
    }


    .yellow.page-overview .professionals-overview-list ul li .i-o-image img {
        width: 100%;
    }

    .yellow .search-result .s-product-title {
        font-size: 16px !important;
        color: #404049 !important;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .yellow .search-result #result-foot {
        margin-top: 15px;
    }

    .yellow .product-search, .yellow .search-result {
        padding: 0px 20px 0px 20px;
    }

    .yellow .search-result #result-foot #bottom-product-pager {
            left: 0;
        position: relative;
        top: 0px;
        margin-top: 0px;
        margin-bottom: 20px;
        /* right: 0; */
        float: right;
    }

    .blue #coatings-division-grid-container {
            padding: 60px 20px;
    }

    .blue .product-search, .search-result {
        padding: 0px 20px 0px 20px;
    }

    .blue #product-offerings-grid-container,
    .blue #industrial-product-grid-container
    {
        padding: 0px 20px;
    }

    .blue .markets-served-section {
                margin-left: 20px !important;
    }

    .blue #laboratories-section-grid-container {
        padding: 0 20px;
    }

    .colour-trends-content .content-col {
        float: left;
        width: 40%;
        padding-left: 40px;
        padding-right: 50px;
    }

     .how-to-paint-stain.architectural-paint-colour-wp .colour-trends-content .content-col {
        width: 65%;
    }

    .match-colour {
        margin-left: 0px !important;        
    }

    .sf_cols.match-colour .sf_colsIn  p {
        width: 70%;
    }

    .architectural-products-list .product-item {
        width: 22% !important;
        height: auto;
    }


    .arch-products-search {
        width: 76% !important;
        margin-left: 20px;
    }

    .Colour-trend.architectural-paint-colour-wp .Colour-trend-col1, 
    .Colour-trend.architectural-paint-colour-wp .Colour-trend-col2, 
    .Colour-trend.architectural-paint-colour-wp .Colour-trend-col3 {
            display: block;
    }

    .yellow .navsitemap.L1 {
            width: 750px !important;
    }

 
        
    .yellow #market-overview-mobile-block  #mobile-col1 {
        width: 41%;
    }



    .yellow .market-overview-content-block .segment {
            width: 100%;
        }

        .yellow .market-overview-content-block .segment .segment-content {
                width: 100%;
                text-align: center;
        }

        .yellow .market-overview-content-block .segment .segment-content .segment-text 
        {
             width: 100%;
        }

        .paint-colours .top-paint-section .top-left,
        .paint-colours .top-paint-section .top-right
        {
            width: 75%;
        }


        .bottom-paint-grid .bottom-grid {
            gap: 50px;
        }

        .bottom-paint-grid .bottom-grid .grid-card {
            width: 420px;
        }

        .slit-blocks_content .desktop-title .hide-br-on-mobile 
        {
            display:block;
        }

     .paint-color-tools-row .tool-btn {
        font: normal normal bold 10px / 10px "Source Sans Pro", sans-serif;
        bottom: 10px;
    }

    .product-profile .slit-blocks_item {
        width: 300px;
        height: 430px;
    }

    .more-products li {
        width: 274px !important;
        margin-left: 35px;
    }

    .for-your-home-extra-products {
        float: left;
    }

    
    .how-to-paint-stain.architectural-paint-colour-wp .sf_colsOut.Colour-trend-col4 
    {
        width: 73% !important;
    }

     #common-paint-pro-sol-container {     
        width: 100%;
    }

        .htw_common-paint-problems .home-section-three li:last-child {
            width: 63% !important;
        }

        .htw_common-paint-problems .home-section-three li:first-child {
            width: 36% !important;
        }

            .htw_common-paint-problems .home-section-three.more-products {                
                padding: 0 10px 0px 0px;
            }

        .interior-exterior-guide ul li {
            width: 300px !important;
            margin-left: 0px;
            margin-right: 16px !important;
        }

        .interior-exterior-guide ul li:last-child {
            margin-right: 0px !important;
        }

        .best-colours-layout {
            column-gap: 60px !important;
        }

        .industry-markets .markets-served-header-section {
                    flex-direction: column;
        }

        .industry-markets .markets-served-header-section .header-image {
            flex: 0.6;
            text-align: center;
        }

        .blue #breadcrumb {            
            width: 100% !important;
        }

        .blue .contacts-wrap .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            align-items: start;
        }

        .blue .arch-products-search .search-result #result-foot {
            margin-top: 15px;
        }


        .blue .arch-products-search .search-result #result-foot #bottom-product-pager {
            left: 0;
            position: relative;
            top: 0px;
            margin-top: 0px;
            margin-bottom: 20px;
            /* right: 0; */
            float: right;
        }

    .flexbox.justifycontent .about-contact-us #mainnav ul.L1 > li.L1 > ul {
        gap: 120px;
    }

    .contact-us-pages .contact-us-header-section 
    {
        flex-direction: column;
    }

    .contact-us-pages .contact-us-header-section .header-image {
        text-align: center;
    }

    .contact-us-pages .contact-us-header-section .header-image img {
        width: 100%;
        margin-bottom: 60px;
    }

    .about-contact-us .Colour-trend.how-to-paint-stain .Colour-trend-col4 {
        width: 100% !important;
    }

    .about-contact-us .Colour-trend.how-to-paint-stain .Colour-trend-col1,
    .about-contact-us .Colour-trend.how-to-paint-stain .Colour-trend-col2,
    .about-contact-us .Colour-trend.how-to-paint-stain .Colour-trend-col3 
    {
            width: 0px !important;
            height: 0px !important;
    }
        
    .about-contact-us .Colour-trend.how-to-paint-stain .Colour-trend-col4 > div:first-child {
        display: flex;
        width: 100%;
        margin-left: 60px;
    }

    .about-contact-us #cloverdale-history-grid-container {
        margin-bottom: 0px !important;
    }

    .about-contact-us #jumpstart-grid-container {
        flex-direction: column !important;
    }

    .about-contact-us #jumpstart-grid-container .right-item {
        order: -1;
    }


@media only screen and (min-width: 641px) and (max-width: 900px) {
    #wrapper {
        min-width: 768px;
    }
    
    #content {
        max-width: 768px !important;
        padding: 0px 20px;
    }

     #subnav {
        float: left;
        width: 230px;
        position: static;
    }

    #content {
        float: right;
        width: calc(100% - 230px);
        position: static;
    }

    #main {
        padding: 0px 20px !important;
    }

    #secondarynav li {
        padding: 0px 10px 0px;
    }

    .desktop-google-searchbox {
        width: 210px !important;
    }

    #header #logo img {        
        margin-top: 7px;
    }

    #header #logo {
        width: 176px;

    }

        #mainnav ul.L1 > li:nth-child(1) > a {
            right: 437px;
        }

        #mainnav ul.L1 > li:nth-child(2) > a {
            right: 223px;
        }

    .home-style .salesforce-form .home-salesforce-form {
        padding: 0px 20px;
        width: 100%;
    }

    .home-buy-canadian .buy-text {
        width: 342px;
    }

        .home-buy-canadian .buy-canadian-content {
        gap: 5px;
        padding-left: 10px;
    }

        .home-buy-canadian .buy-text {
        width: 320px !important;
    }

    .navsitemap.L1 {
		width: 560px;		
	}

    .bcaa-promo-banner .promo-text {
        margin-left: 40px !important;
    }

    .product-profile-custom .m-w2.section-inner {
        margin: 0;
        max-width: 767px;
    }

    #footer-industrial-content p {
        width: 95% !important;
    }
        
    #secondarynav ul {
        margin-right: 10px;
    }

    .desktop-google-searchbox {
            width: 195px !important;
        }

    .professionals-overview-list ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 20px;
        margin: 0;
        padding: 0;
        list-style: none;
        margin-bottom: 80px !important;
    }

    .professionals-overview-list ul li {
        flex: 0 0 calc(50% - 10px);
        text-align: center;
        box-sizing: border-box;
    }

    .page-section {
        width: 100%;
    }

    .yellow.page-overview .professionals-overview-list ul {
        column-gap: 18px !important;
    }

     .yellow #professional-market-grid-container {
        padding: 40px 0px;
    }

    .yellow .top-paint-section,
    .yellow .bottom-paint-grid
    {
        padding: 0 0px !important;
    }

    .yellow .paint-colour-overview-content-block 
    {
        padding: 0 70px 0px 0px !important;
    }
    .yellow .professionals-overview-list ul {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .yellow .product-search, .yellow .search-result {
        padding: 0px 0px 0px 0px !important;
    }
    
   
    .architectural-top-list {
        display: flex;
        flex-wrap: wrap;
        gap: 56px;
        margin-bottom: 46px;
        margin-left: 62px;        
        row-gap: 0px !important;
    }

    .architectural-top-list .arch_item:first-child {
        width: 100%;
    }

    .architectural-top-list .arch_item:not(:first-child) {
        width: calc(50% - 28px);
        height: 350px;
    }

    .architectural-top-list .arch_item:first-child .slit-blocks_content {
        padding-left: 0px;
        padding: 0px;
        top: 0px !important;
    }

    .architectural-top-list .arch_item .slit-blocks_content h2.desktop-title {  
        margin-top: 10px;
    }
    
    .architectural-top-list .arch_item .slit-blocks_content {
        top: -26px;
    }

    .architectural-products-list .product-item {
        width: 328px !important;
        height: 250px;
    }


    .architectural-products-list .product-item .slit-blocks_content {
        top: 90px;
    }

        .arch-products-search {
            width: 100% !important;
            
        }


    .architectural-paint-colour-wp .colour-trends-content .content-col {
        float: left;
        width: 100%;
        padding-left: 15px;
            padding-right: 10px;
    }

    .architectural-paint-colour-wp .sf_colsOut.Colour-trend-col4 
    {
        width: 65% !important;
    }
    /****/
   .architectural-paint-match-colour {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 32px;
        align-items: flex-start; 
        margin-left: -28px !important;
    }

    .architectural-paint-match-colour > .sf_colsOut {
        float: none !important;
        position: static !important;
    }
    .architectural-paint-match-colour > .sf_colsOut p {
        width: 116% !important;
    }

    .architectural-paint-match-colour > .sf_colsOut h2 {
        margin:0 !important;
    }

    .architectural-paint-match-colour .sf_2cols_1_50 {
        width: 42% !important;
    }

    .architectural-paint-match-colour .sf_2cols_2_50 {
        width: 58% !important;
    }

    .architectural-paint-match-colour .sf_colsIn {
        width: 100% !important;
    }

    .architectural-paint-match-colour img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .yellow #market-overview-mobile-block 
    {
        width: 100% !important;
    }

    .yellow .market-overview-content-block {
        width: 100%;
        text-align: center;
    }   

    .yellow .foot-sitemap 
    {
                padding: 15px 20px !important;
    }

    .yellow .foot-sitemap #footlogo img {
        margin-top: 15px;
        width: 120px;
        padding: 0px;
        margin-right: 15px;
    }

    .yellow .navsitemap.L1 {
        width: 690px !important;
    }

    .paints-boxes ul {
        column-gap: 107px;
        width: 122%;
    }

        .paint-colours .top-paint-section .top-left,
        .paint-colours .top-paint-section .top-right
        {
            width: 100%;
        }

     .bottom-paint-grid .bottom-grid .grid-card {
        width: 340px;
    }

    .slit-blocks_content .desktop-title .hide-br-on-mobile 
        {
            display:none;
        }
    
    .green #mainnav ul.L2 {
        width: 83%;
        margin-left: 40px;
    }

    .product-profile-custom .slit-blocks.product-profile {
        display: flex;
    }

    .product-profile .slit-blocks_item {
        width: 300px;
        height: 375px;
    }

    .product-profile .slit-blocks_content 
    {
                padding: 0px;
    }

        .product-profile .btn-yellow {
            width: 190px;
            left: 18px;
        }

        .more-products li {
            width: 355px !important;
            margin-left: 0px;
        }

        .how-to-paint.slit-blocks.product-profile .btn-yellow {
            width: 208px;
            left: 7px;
            bottom: 40px;
        }

        .how-to-paint-stain.architectural-paint-colour-wp .sf_colsOut.Colour-trend-col4 {
            width: 65% !important;
        }

        .interior-exterior-guide ul li {
            width: 226px !important;
        }

        .interior-exterior-guide.more-products li .content_block .btn-yellow {
            width: 179px;
            bottom: 40px;
        }

        /*********************/
        .best-colours-layout {
            grid-template-columns: 1fr !important;
            grid-template-areas:
            "left"
            "card1"
            "card2"
            "card3"
            "card4"
            "card5" !important;
            row-gap: 35px !important;
            margin-top: 0px !important;
        }


        .best-colours-layout .best-left {
                text-align: left;
                margin-left: auto;
                margin-right: auto;
                max-width: 100%;
                margin-top: 5px;
            }

            .best-colours-layout .palette-card {
                width: 100%;
                height: auto;
            }

            .best-colours-layout .palette-btn {
                text-align: center;
                font: normal normal bold 15px / 18px Source Sans Pro;
                letter-spacing: 0px;
                color: #FFFFFF;
                text-transform: uppercase;
                opacity: 1;
            }

            .best-colours-layout .palette-card img {
                display: block;
                max-width: 100%;
                height: auto;
                margin: 0 auto;
                float: none !important;
                width: auto;
            }

            /***************/
            .best-colours-layout .palette-card .palette-btn {
                left: 35px !important;
                transform: none !important;
                text-align: left !important;
            }

            .best-colours-layout .palette-card  .palette-btn h3 {
                margin: 0;
                text-align: left !important;
            }

            .best-colours-layout .palette-card  img {
                margin: 0 !important;
                width: 350px !important;
            }

    .blue #footer #markets-served-map-items {
        gap: 15px;
    }

    .blue .foot-sitemap #paint-coatings-map #paint-coatings-map-items .sub-title-section .navsitemap.L2
    {
        margin-right: 10px;
    }

    .blue .architectural-top-list .arch_item:last-child {
        width: 100% !important;
    }

    .blue .industrial-lab-section .header-text {
        flex: 1;
    }


    .blue .foundation-of-ntegrity
    {
        grid-template-columns: 1fr;
    }

    .blue .foundation-of-ntegrity .copy
    {
        order: 1;
    }

    .blue .foundation-of-ntegrity .media
    {
        order: 2;
    }

    
    .blue .technician-matching-paint-color
    {
        grid-template-columns: 1fr;
    }

    
    .blue .technician-matching-paint-color .copy
    {
        order: 1;
    }

    
    .blue .technician-matching-paint-color .media 
    {
        order: 2;
    }

     .industrial-product-overview .arch-products-search {
        width: 100% !important;
       
    }

    .flexbox.justifycontent .about-contact-us #mainnav ul.L1 > li.L1 > ul {
        gap: 70px;
    }

    .contact-us-pages .contact-us-header-section .header-image img {
        width: 100%;
        margin-bottom: 0px !important;
    }

    .contact-us-pages .contact-us-header-section 
    {
                gap: 15px !important;
    }

}