img, picture, video, embed, iframe { max-width: 100%;}
a:focus { outline: none;}

h1, h2 { color: #333; font: bold 35px 'Roboto', Arial, sans-serif; text-align: center; text-transform: uppercase;}
h3 { font-size: 24px; font-family: 'Roboto', sans-serif; color: #6a6a6a;}
p { color: #717171; font: 16px / 24px 'Roboto', sans-serif;}




.btnAction { background: #4caf50; border-radius: 6px; color: #fff; display: inline-block; font: 17px 'Roboto', sans-serif; padding: 15px 20px; transition: all .15s;}
.btnAction:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 20%); color: #fff; text-decoration: none; transform: scale(1.03);}
.btnAction svg { height: 18px; position: relative; top: -2px;}

.banner { position: relative;}
.banner .boxImgBanner { height: 0; padding-top: 30.58%; position: relative;}
.banner .boxImgBanner img { width: 100%;}
.banner .boxImgBanner picture { bottom: 0; left: 0; position: absolute; right: 0; top: 0;}
.banner .boxImgBanner::after { content: ""; background: rgba(0,0,0,0.5); position: absolute; top: 0; bottom: 0; right: 0; left: 0;}
.banner header { align-items: center; cursor: pointer; position: absolute; display: flex; position: absolute; display: flex; left: 0; right: 0; top: 0; bottom: 0; justify-content: center; z-index: 1;}
.banner header hgroup { margin: 0 auto; max-width: 910px; text-align: center; width: 100%;}
.banner header hgroup h1 { color: #fff; font-size: 44px;}
.banner header hgroup h2 { line-height: 24px;}
.banner header hgroup h2 small { text-transform: none; color: #ebebeb; font-size: 20px;}
.banner header hgroup::after { background: #4caf50; border-radius: 4px; color: #fff; content: "Consultar Preço"; display: inline-block; line-height: initial; font-size: 15px; font-weight: 500; margin-top: 15px; padding: 14px 20px; text-transform: uppercase; transition: all 0.2s ease 0s;}
.banner header:hover hgroup::after { background: #408e43; transform: rotate(0deg) scale(1.04);}

.headerTop { background: #F7F7F7; padding-bottom: 15px; padding-top: 15px;}
.headerTop .topContent { position: relative; z-index: 1;}
.headerTop .topContent .telTop { text-align: right;}
.headerTop .topContent .telTop p { color: #db954f; display: inline-block; font-size: 20px; font-weight: bold; line-height: 36px; margin-bottom: 0;}
.headerTop .topContent .telTop a { background: #4caf50; border-radius: 8px; color: #fff; display: inline-block; font-family: 'Roboto', sans-serif; padding: 12px 15px; text-decoration: none; }
.headerTop .topContent .telTop a i { font-size: 18px; margin-left: 5px; position: relative;}
.headerTop .topContent .telTop a svg { height: 18px; position: relative; top: -2px;}

.headerTop .menuTop { left: 0; margin-top: -38px; position: absolute; right: 0; text-align: center;}
.headerTop .menuTop .menuInstitucional { display: inline-block; text-align:center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1;}
.headerTop .menuTop .menuInstitucional li { display: inline-block; margin-left: 30px;}
.headerTop .menuTop .menuInstitucional li a { color: #4C4C4C; font-family: 'Roboto', sans-serif; font-size: 18px; position: relative; transition: all 0.2s; text-transform:uppercase; }
.headerTop .menuTop .menuInstitucional li a:hover { color: #FF8800; text-decoration: none;}
.headerTop .navMenuButton { display: none;}
.headerTop .menuTop .telBtnModal { display:none;}


.boxCategoria { margin-bottom: 90px; margin-top: 45px;}
.boxCategoria h2 { color: #fff; font-weight: 500; line-height: 40px; text-align: left;}
.boxCategoria h2 small { display: block; font-size: 25px;}
.boxCategoria .boxCat { display: flex; justify-content: center; padding: 45px 0 45px 20px; position: relative;}
.boxCategoria .boxCat .box a { border: 1px solid #fff; color: #fff; display: inline-block; padding: 15px 30px; text-transform: uppercase;}
.boxCategoria .boxCat .box a:hover { background: rgba(0,0,0,0.2); text-decoration: none;}
.boxCategoria .boxCat .box a svg { height: 17px; position: relative; top: -1px;}
.boxCategoria .boxCat2::before { background: #66687e; bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: 20px;}
.boxCategoria .boxCat2 { background: #7c809b;}
.boxCategoria .boxCat1 { background: #db954f;}
.boxCategoria .boxCat1::before { background: #a2682d; bottom: 0; content: ""; left: 0; position: absolute; top: 0; width: 20px;}

.boxSegmentos h2 { margin-bottom: 45px;}
.boxSegmentos ul { list-style: none; padding: 0;}
.boxSegmentos ul li .contentLi { box-shadow: 1px 7px 8px -2px rgba(0,0,0,.07); border: 1px solid #e9e9e9; margin-bottom: 30px; padding-bottom: 60px; text-align: center;}
.boxSegmentos ul li .contentLi > span { display: block; margin-bottom: 30px;}
.boxSegmentos ul li .contentLi h3 { color: #444; font-weight: 900; padding: 0 35px; text-transform: uppercase;}
.boxSegmentos ul li .contentLi h3 span { display: block; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 400;}
.boxSegmentos ul li .contentLi > a {  margin-top: 30px;}

.boxQuemSomos { padding-top: 75px;}
.boxQuemSomos hgroup { text-align: center;}
.boxQuemSomos hgroup h2 { margin-bottom: 10px;}
.boxQuemSomos hgroup h3 { color: #8a8a8a; font-family: 'Roboto', sans-serif; margin-bottom: 30px;}


.boxClientes { background: #f2f2f2; float: left; margin-bottom: 90px; margin-top: 90px; padding: 60px 0; width: 100%;}
.boxClientes h2 { margin-bottom: 10px;}
.boxClientes h3 { color: #8a8a8a; font-size: 22px; font-weight: 500; margin-bottom: 45px; text-align: center;}
.boxClientes ul { list-style: none; padding: 0;}
.boxClientes ul li {float: left; padding: 0 15px; text-align: center; width: 20%;}
.boxClientes ul li .boxImg { background: #fff; border-radius: 4px; padding: 5px;}

.footerGeral { margin-top: 75px; width: 100%;}
.footerGeral .footerLogo { text-align: center;}
.footerGeral .footerLogo p { font-size: 13px; margin: 30px auto; width: 300px;}
.footerGeral .footerBox { border-top: 1px solid #F0F0F0; display: flex; justify-content: space-around; margin-top: 30px; padding: 60px;}
.footerGeral .footerBox h2 { color: #2C3344; font-size: 28px; margin-bottom: 30px; font-weight: 600;}
.footerGeral .footerBox .footerLink ul { padding: 0; list-style: none;}
.footerGeral .footerBox .footerLink ul li { line-height: 35px;}
.footerGeral .footerBox .footerLink ul li a { color: #1D74C8;}

@media (max-width: 991px) {

    .overflowBody { overflow: hidden;}

    .headerTop { position: relative;}
	.headerTop .topContent .boxLogo { text-align: center;}
    .headerTop .topContent .telTop { display:none;}

    .headerTop .navMenuButton { background: 0 0; border: 0; color: #fff; display: block; float: left; height: 38px; padding: 0 12px; position: relative; z-index: 1;}
	.headerTop .navMenuButton span { background-color: #4C4C4C; border-radius: 1px; display: block; height: 3px; margin-bottom: 4px;  width: 20px;}

	.headerTop .menuTop { margin-top: 0; top: calc(50% - 18px);}
	.headerTop .menuTop .telBtnModal { display:block; }
	.headerTop .menuTop .menuInstitucional {background: #db954f  url(imagens/logo-miranda-e-teixeira-white.png) no-repeat center top; background-position-y: 35px; bottom: 0; display: none; left: 0; list-style: none; margin: 0; max-width: 300px; padding: 160px 0 0 20px; position: fixed; text-align: left; transform: translateX(-100%); transition: top 0.3s, transform 0.3s; top: 0; width: 80%; z-index: 991; background-size: 110px;}
	.headerTop .menuTop .menuInstitucional li a { color: #fff; display: block; font: 18px 'Roboto', sans-serif; padding: 20px 20px 20px 40px; text-transform:capitalize}
	.headerTop .menuTop .menuInstitucional li a:hover::after { display: none;}
	.headerTop .menuTop .menuInstitucionalShow { transform: translateX(0);}

	.headerTop .backMenu { background: rgba(0, 0, 0, 0.3); bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 990;}
    .headerTop .backMenu.backMenuShow { display: block;}
	.headerTop .telBtnModal { float: right; position: relative; z-index: 1;}
	.headerTop .telBtnModal .btn { background:none; border: none; box-shadow: none; color:#009688; padding: 4px 12px;}

    .banner header { padding: 30px; position: relative;}
    .banner header hgroup { max-width: none;}
    .banner header hgroup h1 { color: #333; font-size: 35px;}
    .banner header hgroup h2 small { color: #8a8a8a; font-size: 24px;}

    .boxQuemSomos .btnAction { display: block; margin: 0 auto 30px; max-width: 180px; text-align: center;}

    .boxCategoria .boxCat1 { margin-bottom: 30px;}

    .boxClientes ul { overflow-y: auto; white-space: nowrap;}
    .boxClientes ul li { display: inline-block; float: none; margin-bottom: 15px; width: 25%;}

    .customScrollbar::-webkit-scrollbar {background:#e8e8e8; border-radius:10px; width:5px; height:10px; position:relative; bottom:5px;}
    .customScrollbar::-webkit-scrollbar-thumb {background-color:#b87839; border-radius:10px;}
    .customScrollbar::-webkit-scrollbar-thumb:hover {background-color:#db954f;}
    .customScrollbar::-webkit-scrollbar-thumb:active {background-color:#db954f;}

}

@media (max-width: 767px) {

    h2 { font-size: 30px;}

    .banner header hgroup h1 { font-size: 26px;}
    .banner header hgroup h2 small { color: #8a8a8a; font-size: 18px;}

    .boxQuemSomos { padding-top: 30px;}

    .boxClientes ul li { width: 50%;}

    .boxCategoria { margin-bottom: 60px;}
    .boxCategoria h2 { font-size: 30px; line-height: 32px; margin-bottom: 15px;}
    .boxCategoria h2 small { font-size: 22px;}
    .boxCategoria .boxCat .box a { border: none;}
    .boxCategoria .boxCat1 .box a { background: #a2682d;}
    .boxCategoria .boxCat2 .box a { background: #66687e;}

    .footerGeral .footerBox { display: block; width: 100%;}
    .footerGeral .footerBox .footerContato { margin-bottom: 45px;}

}

@media (max-width: 575px) {
    .banner .boxImgBanner { padding-top: 52.1%;}
}
