img, picture, video, embed, iframe { max-width: 100%;}
a:focus { outline: none;}
body { font-family: "Poppins", sans-serif;}
h1 { font-weight: 800;}
h2 { color: #e81d22; font-weight: 700; margin: 0 auto; text-align: center; width: 100%;}
h2 small { font-size: 20px; color: #aaa; display: block;}
section  { padding-bottom: 75px; padding-top: 75px;}

.verticalAlignFlex { align-items: center; display: flex;}
.btnCTA { background: #4caf50; font-size: 18px; text-transform: lowercase; border-radius: 30px; color: #fff; display: inline-block; padding: 12px 30px 12px; transition: all .15s;}
.btnCTA:hover{ background: #439946; text-decoration:none; color:#fff}

.headerTop { background: #f6f6f6; padding-bottom: 15px; padding-top: 15px;}
.headerTop .topContent { position: relative; z-index: 1;}
.headerTop .topContent .telTop { text-align: right;}
.headerTop .topContent .telTop a { background: #4caf50; border-radius: 8px; color: #fff; display: inline-block; 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: -42px; 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-weight: 600; font-size: 18px; position: relative; transition: all 0.2s; text-transform:uppercase; }
.headerTop .menuTop .menuInstitucional li a:hover { color: #e81d22; text-decoration: none;}
.headerTop .navMenuButton { display: none;}
.headerTop .menuTop .telBtnModal { display:none;}

.banner { position: relative;}
.banner .boxImgBanner { height: 0; padding-top: 34.7%; 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: 810px; text-align: center; width: 100%;}
.banner header hgroup h1 { color: #fff; font-size: 45px;}
.banner header hgroup p {  color: #ebebeb; font-size: 20px; line-height: 24px; text-transform: none;}
.banner header hgroup::after { background: #4caf50; border-radius: 30px; 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);}

.boxProdutos { background: #f6f6f6; padding-bottom: 60px; text-align: center;}
.boxProdutos h2 { line-height: 30px; margin-bottom: 15px;}
.boxProdutos h2 small { color: #e81d22; display: block; font-size: 24px;}
.boxProdutos p { color: #aaa; font-size: 20px;}
.boxProdutos .prodList { list-style: none; justify-content: center; margin: 0; padding: 45px 0 0;}
.boxProdutos .prodList .contentLi { background: #fff; border-radius: 40px; overflow: hidden;  padding-bottom: 45px; text-align: center;}
.boxProdutos .prodList .contentLi span { display: block; padding-bottom: 30px;}
.boxProdutos .prodList .contentLi p { font-size: 16px; padding: 0 30px; text-align: left;}
.boxProdutos .prodList .contentLi h3 { font-size: 22px; font-weight: 600; margin: 0 0 30px; padding: 0 15px;}
.boxProdutos .prodList .contentLi h3 small { font-size: 20px; color: #aaa; display: block;}

.boxSobreMim { text-align: center;}
.boxSobreMim h2 { margin-bottom: 30px;}
.boxSobreMim p { text-align: left;}
.boxSobreMim span { position: relative; display: inline-flex; padding: 20px;}
.boxSobreMim span::before { content: ''; width: 200px; height: 100px; background: #fff; position: absolute; left: 0; top: 0; z-index: -1; border: 4px solid #e81d22; border-bottom: 0; border-right: 0;}
.boxSobreMim span::after { content: ''; width: 100px; height: 200px; background: #fff; border-right: 4px solid #e81d22; border-bottom: 4px solid #e81d22; position: absolute; right: 3px; bottom: 0; z-index: -1;}
.boxSobreMim span img { border-radius: 0 15px;}

.boxFaq { background-color: #fff; margin:60px 0 0; padding: 60px 45px; border-radius:12px;}
.boxFaq h2 { margin-bottom: 45px; text-align: center;}
.boxFaq .accordionBtn:first-of-type { border-top: 1px solid #eee;}
.boxFaq .accordionBtn { border-bottom: 1px solid #eee; color:#444; cursor:pointer; margin:0; width:100%; text-align:left; outline:none; font-size:15px; transition:0.4s;}
.boxFaq .accordionBtn span { display:inline-block;font:18px 'Montserrat', sans-serif;padding:25px 0;width:calc(100% - 100px);}
.boxFaq .accordionBtn svg {border-radius:50%; font-size:50px;padding:10px 15px;transition:transform 0.5s;vertical-align:middle;}
.boxFaq .activeBtn svg { transform:rotate(90deg);}
.boxFaq .activeBtn span {border-bottom:0;}
.boxFaq .panelBody { padding-left:60px;background-color:white;max-height:0;max-width:900px;overflow:hidden;transition:max-height 0.2s ease-out;width:100%;}
.boxFaq .panelBody > :first-of-type { margin-top:20px;}
.boxFaq .panelBody table { width:100% !important;overflow-x:auto;display:inline-flex;align-items:center; margin-bottom:45px;}
.boxFaq .panelBody table td img { max-width:200px;}
.boxFaq .panelBody table td { border:1px solid #ddd;padding:15px;}
.boxFaq .panelBody table td p { margin:0; padding:0;}

.boxConsultarPreco { background: url(imagens/banners/banner.jpg) no-repeat; background-size: cover; position: relative; text-align: center;}
.boxConsultarPreco::after { content: ""; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; bottom: 0; right: 0; left: 0;}
.boxConsultarPreco .contentText { position: relative; z-index: 1;}
.boxConsultarPreco .contentText h2 { color: #fff; margin-bottom: 45px;}
.boxConsultarPreco .contentText h2 small { color: #cfcfcf; display: block; margin-top: 15px;}

.footerGeral { padding-bottom: 60px; padding-top: 60px;}
.footerGeral .footerLogo img { max-width: 300px; margin-bottom: 40px;}
.footerGeral .footerBox h2 { margin-bottom: 30px;}
.footerGeral .tel { color: #5e5e5e; font-size: 20px; font-weight: 700;}

@media (max-width: 991px) {

    .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: #ffffff  url(imagens/layout/dutelog-01.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 0; position: fixed; text-align: left; transform: translateX(-100%); transition: top 0.3s, transform 0.3s; top: 0; width: 80%; z-index: 991; background-size: 200px;}
	.headerTop .menuTop .menuInstitucional li { display: block; margin-left: 25px;}
    .headerTop .menuTop .menuInstitucional li a { color: #333; display: block; font: 18px "Poppins", sans-serif; padding: 20px; 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;}

    .banner header hgroup p { color: #858585; font-size: 18px;}

}

@media (max-width: 767px) {

    .banner .boxImgBanner::after { display: none;}

    .banner header hgroup h1 { font-size: 26px;}
    .banner header hgroup h2 small { color: #8a8a8a; font-size: 18px;}

    .boxProdutos .prodList li:first-child { margin-bottom: 45px;}

    .boxFaq { padding-left: 0; padding-right: 0;}

}

@media (max-width: 575px) {

    h2 { font-size: 24px;}

    .headerTop .topContent .boxLogo img { max-width: 180px;}

    .banner .boxImgBanner { padding-top: 52.1%;}

    .banner header hgroup h1 { font-size: 24px;}



    .boxFaq .panelBody { padding-left: 15px;}

    .boxSobreMim a { margin-bottom: 30px;}

}