/* MAX-WIDTH 1920 PX */

@media only screen and (max-width: 1920px){

.pageThumb{
    max-width: 100%;
}

}

/* MAX-WIDTH 1024 PX */

@media only screen and (max-width: 1024px){

.tablet-hide{
    display: none;
}

.tablet-show{
    display: flex !important;
}

.destBox{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.destBox.invert{
    flex-direction: column;
}

.destImageSide{
    width: 100%;
}

.destContentSide{
    width: 100%;
    padding: 25px 20px;
}

.produtosListMenuItem{
    width: 100%;
    flex-basis: 100%;
    max-width: 100%;
}

.pageThumb{
    height: auto;
}

.pageTitle{
    padding: 5px 15px 25px 15px;
    margin: 20px 0 0 0;
}

    .pageTitle h1{
        font-size: 28px;
    }

    .pageTitle span{
        font-size: 14px;
    }

.pageShareBox{
    align-items: flex-start;
}

.pageShare{
    padding: 20px 25px;
    flex-direction: column;
    gap: 20px;
}

    .pageShareInfoBox{
        width: 100%;
        align-items: center;
        justify-content: center;
    }

        .pageShareInfo{
            align-items: center;
            justify-content: center;
            flex-direction: column-reverse;
        }

        .pageShareInfoDate{
            align-items: center;
            justify-content: center;
        }

        .pageShareInfoCategory{
            align-items: center;
            justify-content: center;
        }

    .pageShareSocialBox{
        width: 100%;
        align-items: center;
        justify-content: center;
    }

.pageContentBox{
    padding: 0;
}

    .pageContent{
        padding: 25px 25px 25px 25px;
    }

.pageBlogContentTitle{
    margin: 0;
}

    .pageBlogContentTitle h2{
        width: 96%;
        font-size: 18px;
    }

.pageBlogContentCta{
    flex-direction: column;
    padding: 0 25px;
    gap: 20px;
}

    .pageBlogContentCtaTxt{
        width: 100%;
    }

    .pageBlogContentCtaBtn{
        width: 100%;
    }

.pageBlog-list{
    flex-direction: column;
    padding: 0 25px;
}

    .pageBlog-item{
        width: 100%;
        max-width: 100%;
    }


.footerWrap{
    flex-direction: column;
}

    .footerBox{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 20px 30px;
    }

        .footerLogo{
            width: 100%;
            padding: 0 0 40px 0;
        }

            .footerLogo img{
                width: 100%;
                max-width: 200px;
            }

        .footerNav{
            width: 100%;
        }

        .footerInfo{
            width: 100%;
        }

    }

@media only screen and (max-width: 900px){

}

/* MAX-WIDTH 767 PX */

@media only screen and (max-width: 767px){

    :root{
        --fix-margin-header: 76px;
    }

    .mobile-hide{
        display: none;
    }

    .mobile-show{
        display: flex !important;
    }

    .heroWrap{
        margin-top: 76px;
    }

    .heroBox{
        justify-content: flex-start;
        padding: 40px 30px;
    }

    .heroContent{
        width: 100%;
        align-items: flex-start;
    }

    .heroTitle{
        align-items: flex-start;
        text-align: left;
        gap: 15px;
    }

    .heroTitle > h1{
        font-size: 34px;
        margin: 0 0 0 0;
    }

        .heroTitle > h1 span{
            font-size: 34px;
        }

    .heroCTA{
        flex-direction: column;
        align-items: flex-start;
    }

    .heroprodBox .title > h2{
        text-align: left;
        font-size: 22px;
    }

    .bigtitle h2{
        font-size: 20px;
        font-weight: 700;
    }

    .navList{
        flex-direction: column;
    }

    .navList a{
        width: 100%;
        max-width: 100%;
        flex-grow: 1;
    }

        .navItem{
            max-width: 100%;
            flex-direction: row;
            justify-content: flex-start;
            padding: 10px 15px;
        }

        .navItemIcon{
            width: 40px;
        }

        .navItemTxt{
            width: calc(100% - 40px);
            justify-content: flex-start;
            padding: 0 5px;
        }

            .navItemTxt > span{
                font-size: 14px;
            }

    .nlContent{
        flex-direction: column;
        gap: 20px;
    }

        .nlTitle{
            width: 100%;
        }

        .nlCTA{
            width: 100%;
            justify-content: flex-start;
        }

    .premiumWrap{
        min-height: auto;
    }

    .premiumBox{
        min-height: auto;
        padding: 35px 10px;
    }

    .premiumTitle{
        padding: 0 40px;
    }

    .premiumTitle span{
        font-size: 14px;
        margin: 0 0 5px 0;
    }

    .premiumTitle h2{
        font-size: 32px;
    }

    .premiumAddress{
        margin: 20px 0 0 0;
    }

        .premiumAddress p{
            font-size: 20px;
            text-align: center;
        }

    .premiumCtaBox{
        flex-direction: column;
    }

    .videoWrap{
        min-height: auto;
    }

        .videoWrap .title h2{
            font-size: 20px;
        }

    .ondeBox .title > h2{
        font-size: 26px;
        text-align: left;
    }

    .ondeList{
        flex-direction: column;
    }

        .ondeCard{
            width: 100%;
        }

    .cards{
        flex-direction: column;
    }

        .cards a{
            max-width: 100%;
        }

    .nlBox{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

        .nl50{
            max-width: 100%;
            width: 100%;
        }

    .solucoes-card-list{
        flex-direction: column;
    }

        .solucoes-card{
            width: 100%;
            max-width: 100%;
        }

    .side-title{
        width: 100%;
    }

    .faqWrap{
        padding: 30px 0 20px 0;
    }

    .faqBox{
        flex-direction: column;
    }

    .faqBox .side-title > h2{
        font-size: 30px;
    }

        .faq-list{
            width: 100%;
        }

    .blogBox .title{
        gap: 10px;
    }

    .blog-list a{
        max-width: 100%;
    }

    .blog-item-title-box{
        padding: 15px 10px 15px 15px;
    }

    .blog-item-title > h3{
        font-size: 18px;
        line-height: 1.2;
    }

    .contatoMap{
        width: 100%;   
    }

    .contatoBox .side-title-btn-box{
        flex-direction: column;
        align-items: flex-start;
    }

    .linhasTitle p{
        font-size: 14px;
    }

    .linhasList{
        flex-direction: column;
    }

        .linhasItem{
            width: 100%;
        }

    .produtosList{
        flex-direction: column;
    }

    .produtosItem{
        width: 100%;
    }

.single-produto-breadcumb{
    padding: 20px 0px;
}

.pageProduto{
    padding: 0 20px 40px 20px;
}

.produtoContent{
    flex-direction: column;
}

    .produtoThumb{
        width: 100%;
    }

    .produtoInfo{
        width: 100%;
    }

    .produtoTitle h1{
        font-size: 24px;
    }

    .produtoColorbarItemBox{
        width: calc(50% - 15px);
    }

        .produtoColorbarItem{
            width: 100%;
            height: 75px;
        }

    .produtoColorbarCircle{
        width: 100%;
    }

    .produtoRelatedBox{
        padding: 0 20px;
    }

    .produtoRelatedTitle h2{
        font-size: 14px;
    }

    .produtosRelatedBox .produtosItemContent{
        padding: 30px 15px;
    }

    .produtoRelatedBox .produtosItemContent h2{
        min-height: auto;
    }

    .produtoRelatedBox .produtosItemContentBtn{
        padding: 0 15px;
    }


}