.m-col-lg-1, .m-col-lg-2, .m-col-lg-3, .m-col-lg-4, .m-col-lg-5, .m-col-lg-6, .m-col-lg-7, .m-col-lg-8, .m-col-lg-8_3, .m-col-lg-9, .m-col-lg-10, .m-col-lg-11, .m-col-lg-12, .m-col-lg-12_5, .m-col-lg-13, .m-col-lg-14, .m-col-lg-15, .m-col-lg-16, .m-col-lg-17, .m-col-lg-18, .m-col-lg-19, .m-col-lg-20, .m-col-lg-21, .m-col-lg-22, .m-col-lg-23, .m-col-lg-24, .m-col-lg-25 {float:left;padding-right: 2vw;margin: 0 0 10px;position:relative;box-sizing:border-box}
.m-col-lg-1 {width: 4%}
.m-col-lg-2 {width: 8%}
.m-col-lg-3 {width: 12%}
.m-col-lg-4 {width: 16%}
.m-col-lg-5 {width: 20%}
.m-col-lg-6 {width: 24%}
.m-col-lg-7 {width: 28%}
.m-col-lg-8 {width: 32%}
.m-col-lg-8_3 {width:calc(100%/3)}
.m-col-lg-9 {width: 36%}
.m-col-lg-10 {width: 40%}
.m-col-lg-11 {width: 44%}
.m-col-lg-12 {width: 48%}
.m-col-lg-12_5 {width: 50%}
.m-col-lg-13 {width: 52%}
.m-col-lg-14 {width: 56%}
.m-col-lg-15 {width: 60%}
.m-col-lg-16 {width: 64%}
.m-col-lg-17 {width: 68%}
.m-col-lg-18 {width: 72%}
.m-col-lg-19 {width: 76%}
.m-col-lg-20 {width: 80%}
.m-col-lg-21 {width: 84%}
.m-col-lg-22 {width: 88%}
.m-col-lg-23 {width: 92%}
.m-col-lg-24 {width: 96%}
.m-col-lg-25 {width: 100%}
.m-col-last {padding: 0}
.m-col-20 {margin: 0 0 20px}
.m-col-0 {margin: 0}

.desktop { display: none!important}
.mobile { display: block!important}
.indent { padding: 0 28px; max-width: 100%; width: 100%}
.subtitle { font-size: 18px}
.text { font-size: 16px}

.d-m-block { display: block }
.d-m-none { display: none }
.d-m-flex { display: flex!important}
.flex-m-wrap { flex-wrap: wrap}
.flex-m-no-wrap { flex-wrap: nowrap}
.flex-m-column { flex-direction: column}
.flex-m-column-reverse { flex-direction: column-reverse}
.flex-m-row { flex-direction: row}
.align-m-items-center { align-items: center}
.align-m-items-start { align-items: flex-start}
.align-m-items-end { align-items: flex-end}
.justify-m-content-between { justify-content: space-between}
.justify-m-content-center { justify-content: center}
.justify-m-content-end { justify-content: flex-end}
.justify-m-content-start { justify-content: flex-start}
.h-m-100 { height: 100% !important}
.h-m-auto { height: auto !important}
.w-m-100 { width: 100% !important}
.w-m-auto { width: auto !important}
.m-relative { position: relative}
.m-absolute { position: absolute}

body > #wrapper {min-height: 0}

.desktop {display: none}

#wrapper { padding-top: 64px}


.contato-sta{padding: 17px 0 21px}
.contato-sta h2{font-size: 12px}
.contato-sta a{height: 24px; font-size: 11px}

.ser-item .info-top h2{font-size: 17px}
.ser-item .info-top p{font-size: 12px}
.ser-item .info-mid h2{font-size: 15px}

#hamburger { cursor: pointer; width: clamp(1rem, 2vw + 2rem, 8rem); height: clamp(0.15rem, 0.25vw + 0.25rem, 0.25rem); display: flex; align-items: center}
#hamburger:hover { opacity: 1}
#hamburger div, #hamburger div:after, #hamburger div:before { background-color: var(--dark); border-radius: 0; width: clamp(1rem, 2vw + 2rem, 8rem); height: clamp(0.15rem, 0.25vw + 0.25rem, 0.25rem); transition: all 0.15s linear}
#hamburger div:before, #hamburger div:after { content: ""; position: absolute}
#hamburger div:before { transform: translateY(-250%)}
#hamburger div:after { transform: translateY(250%)}
#hamburger.open div:before { transform: rotate(45deg)}
#hamburger.open div:after { transform: rotate(-45deg)}
#hamburger.open div, #hamburger.open div:after, #hamburger.open div:before { background-color: var(--dark)}
#hamburger.open div { background: transparent}

#header{position: fixed; width: 100%; top: 0; z-index: 300}
#header .indent{justify-content: space-between}
#header .logo figure{width: 258px}

#header nav{display: block; position: fixed; flex-direction: column; top: 0; right: -297px; background-color: var(--dark); width: 297px; height: 569px; align-items: flex-start; padding: 26px 22px; z-index: 200; transition: all 0.3s ease}
#header nav.active{right: 0; transition: all 0.3s ease}
#header nav ul{flex-direction: column; margin-top: 40px; align-items: flex-start; gap: 20px; margin-bottom: 0; height: auto}
#header nav ul li{font-size: 14px; color: #fff}
#header nav ul .no-hover:hover:after{width: 0}
#header nav ul li:after{bottom: -10px}
#header nav .mob-top-menu{display: flex!important; width: 100%; align-items: center; justify-content: space-between}
#header nav .mob-top-menu > figure{width: 19px; cursor: pointer}
#header nav .mob-top-menu > a figure{width: 78px; margin-right: 20px}
#header nav ul .list-cont .list-prod{max-height: 0; overflow: hidden; display: flex; position: unset;background-color: unset; gap: 10px;padding: 0;width: unset; flex-direction: column; margin: 5px 0 ; border-left: 2px var(--orange) solid; padding-left: 12px}
#header nav ul .list-cont::after{bottom: -5px}
#header nav ul .list-cont .list-prod a{color: #fff; font-size: 14px}
#header nav ul .list-cont.active .list-prod{background-color: unset; padding: 0; padding-left: 12px; max-height: 220px}
#header nav ul li.active:after{display: none}
#header nav > div:last-child{ flex-direction: column; align-items: flex-start}
#header nav .btn-con{display: none}
#header nav > div:last-child > div:first-child{margin-top: 15px}
#header nav > div:last-child > div:first-child > a{font-size: 14px; color: #fff; font-weight: 300; display: block}
#header nav > div:last-child > div:first-child > a span{color: var(--orange); font-weight: 600}
#header nav > div:last-child > div:first-child .email{ font-size: 14px;margin-top: 5px}
#header nav > div:last-child > div:first-child .email span{ color: var(--blue); font-weight: 600}
#header nav > div:last-child > div:first-child .d-flex-align{gap: 7px; margin: 30px 0}
#header nav > div:last-child > div:first-child .d-flex-align figure{width: 25px}

#header nav .switch {  width: 68px; height: 24px}
#header nav .switch label{height: 24px; width: 34px}
#header nav .switch label .figure{ width: 20px}
#header nav .switch .slider:before {  height: 24px; width: 34px; left: 0; bottom: 0; background-color: var(--orange)}
#header nav .switch input.uk:checked + .slider:before {left: 34px}

#footer .top{flex-direction: column-reverse; gap: 40px}
#footer .top > div{flex-direction: column; height: auto; gap: 5px; padding: 6px 30px; align-items: flex-start}
#footer .top > div p{margin: 0 auto}
#footer .bottom .nav-swork{display: none}
#footer .bottom hr{display: none}
#footer .bottom .d-flex{margin: 0 auto}
#footer .bottom .d-flex nav{display: none}
#rodape > div{flex-direction: column; gap: 6px}

#rodape > div > p{font-size: 12px}
#rodape > div > div > p{font-size: 10px}
#rodape div figure{width: 35px}

#home .banner{min-height: 71.75vw}
#home .banner .indent{max-width: 600px}
#home .banner .indent .item{width: 34vw;  max-width: 210px}
#home .uniao{padding: 47px 0 0}
#home .uniao .indent{ margin-bottom: 24px}
#home .uniao h2{font-size: 22px; margin-bottom: 22px}
#home .uniao a{font-size: 12px}
#home .uniao a figure{width: 70px}
#home .uniao > figure{position: unset; width: 275px; margin-left: auto}


#onde{background-size: 250px; background-position: -130px 0}
#onde .indent{flex-direction: column; gap: 30px}
#onde .indent > div:first-child,
#onde .indent > div:last-child{padding-left: 70px}
#onde .indent div:first-child h2{font-size: 19px; margin-bottom: 20px}
#onde .indent div:first-child h3, #onde .indent div:first-child p{font-size: 12px; width: 105px}
#onde .indent div:first-child hr{width: 50px; border-bottom: 2px white solid; margin: 30px 0 17px}
#onde .indent div:last-child figure{width: 100%}
#onde .indent div:last-child > div ul{height: 78px}
#onde .indent div:last-child > div ul li{font-size: 12px}

#depoimento{background-size: 100%; background-repeat: no-repeat; padding: 40px 0 65px}
#depoimento .indent{flex-direction: column}
#depoimento .indent h2{font-size: 22px; margin-bottom: 20px}
#depoimento .indent .container .t-item{height: 25vw}
#depoimento .indent .container .t-item figure{width: 25vw; margin: 0 auto; max-width: 120px}
#depoimento .indent .container .bottom .b-item{width: 300px; left: -100%; transform: translateX(-50%)}
#depoimento .indent .container .bottom .b-item.active{ left: 50%}
@keyframes fade-in{
    from { opacity: 0; left: -100%}
    20%  { opacity: 0; left: 150%} 
    to   { opacity: 1; left: 50%}
}
#depoimento .indent .container .bottom .b-item p{font-size: 13px}
#depoimento .indent .container .bottom .b-item > div figure{width: 70px}
#depoimento .indent .container .bottom .b-item > div > div h3{font-size: 15px}
#depoimento .indent .container .bottom .b-item > div > div h4{font-size: 11px}

#depoimento .indent .container{margin-bottom: 20px}
#depoimento .indent .container .m-item{width: 90%; margin: 20px auto 50px auto}
#depoimento .indent .container .m-item .logo-dep{border-bottom: 1px var(--dark) solid; width: 100%; padding-bottom: 10px; margin-bottom: 20px}
#depoimento .indent .container .m-item .logo-dep figure{width: 70vw; max-width: 100px; margin: 0 auto}
#depoimento .indent .container .m-item .logo-dep figure img{border-radius: 0!important}
#depoimento .indent .container .m-item p{font-size: 20px; margin-bottom: 20px}
#depoimento .indent .container .m-item > div figure{width: 110px; margin-right: 20px; border-radius: 50px}
#depoimento .indent .container .m-item > div figure img{ border-radius: 60px}
#depoimento .indent .container .m-item > div > div h3{font-size: 20px}
#depoimento .indent .container .m-item > div > div h4{font-size: 18px}
#depoimento .indent .container .mob-car .owl-nav{ margin: 0 auto; align-items: center; justify-content: center; display: flex}
#depoimento .indent .container .mob-car .owl-nav .owl-next{ font-size: 100px; width: 60px; font-weight: 300}
#depoimento .indent .container .mob-car .owl-nav .owl-prev{font-size: 100px; width: 60px; font-weight: 300}
#depoimento .indent .container .mob-car .owl-nav button.disabled{opacity: 0}


#diamond .info-top{background-image: url(../images/dia_banner_mobile.webp); height: 57vw}
#diamond .info-top p{width: clamp(280px, 56vw, 800px); margin: 10vw 0 0 30vw; font-size: clamp(12px, 2.4vw, 120px)}
#diamond .info-mid{background-image: none; padding: 33px 0}
#diamond .info-mid .indent > div{margin: 0 auto}
#diamond .info-mid h2{margin-bottom: 10px; font-size: 15px}
#diamond .info-mid h2 br{display: none}
#diamond .info-mid p{font-size: 12px; width: auto}
#diamond .info-mid figure{width: 100%; max-width: 400px; margin-bottom: 10px; margin-left: auto; margin-right: auto}

#fiber .info-top{background-position: 80vw 0}
#fiber .info-top p{width: 208px}
#fiber .info-mid{padding: 30px 0 13.5vw; background-size: 20vw; background-position: -3vw 100%}
#fiber .info-mid .d-flex{flex-wrap: wrap; gap: 20px}
#fiber .info-mid .d-flex .fiber-item{width: calc(50% - 10px)}
#fiber .info-mid .d-flex .fiber-item span{height: 40px}
#fiber .info-mid .d-flex .fiber-item span h3{font-size: 12px}

#procurement .indent{max-width: 650px}
#procurement .info-top{background-image: url(../images/procu_banner_mobile.webp);  height: 57vw}
#procurement .info-top p{width: clamp(170px, 37.7vw, 700px); font-size: clamp(12px, 2.4vw, 120px)}
#procurement .info-mid{background-color: #fff; height: 58vw; max-height: 270px; background-position: bottom; background-size: 100%; background-repeat: no-repeat; padding-top: 26px}
#procurement .info-mid p{font-size: 11px; width: 220px}

#resin .info-top{padding: 27px 0 37px}
#resin .info-top h2{margin-bottom: 20px}
#resin .info-top p{min-width: 180px; width: 42vw}
#resin .info-top figure{min-width: 170px; width: 40vw}
#resin .info-mid{padding: 30px 0}
#resin .info-mid > figure{width: 250px; right: -160px; top: -130px; transform: unset}
#resin .info-mid h2{width: 300px; font-size: 20px; margin: 0 auto 24px}
#resin .info-mid .d-flex{ gap: 12px; align-items: center ; flex-wrap: wrap;justify-content: center}
#resin .info-mid .resin-item{border-radius: 6px ; width: 260px;  gap: 10px}
#resin .info-mid .resin-item span{height: 150px}
#resin .info-mid .resin-item span h3{ font-size: 18px}


#steel .indent{max-width: 650px}
#steel .info-top{background-image: url(../images/steel_banner_mobile.webp); height: 57vw}
#steel .info-top p{width: 50vw; min-width: 214px}
#steel .info-mid{padding-top: 40px}
#steel .info-mid p{width: 90%; padding-bottom: 20px; font-size: 12px}
#steel .info-mid > div{flex-direction: column}
#steel .info-mid figure{width: 80%; margin: 0 auto; max-width: 400px}
#steel .info-bot{padding: 26px 0}
#steel .info-bot .container{flex-direction: column; gap: 40px; padding: 23px 30px ; max-width: 550px}
#steel .info-bot .container p{width: 100%}
#steel .info-bot .container figure{width: 100%; order: 3}
#steel .info-bot .container .cont-foot{order: 2}

#stone .indent{max-width: 600px}
#stone .info-top{background-image: url(../images/stone_banner_mobile.webp); height: 57vw}
#stone .info-top h2{margin-bottom: 8.4vw; font-size: clamp(17px, 4.25VW, 25px)}
#stone .info-top p{width: clamp(170px, 50vw, 400px); font-size: clamp(11px, 3VW, 20px)}
#stone .info-mid{padding: 40px 0}
#stone .info-mid h2{font-size: clamp(16px, 3.55vw, 22px)}
#stone .info-mid p{font-size: clamp(12px, 2.6vw, 16px); width: clamp(225px, 50VW, 300px)}
#stone .info-bot{padding: 40px 0 102px; background-size: 212px; background-position: -40px 100%}
#stone .info-bot .indent{padding-left: unset; padding: 0 28px}
#stone .info-bot h2{font-size: 16px}
#stone .info-bot p{font-size: clamp(12px, 2.6vw, 16px); width: 59vw; min-width: 220px; margin-left: 100px}
#stone .info-rod{padding-top: 20px}
#stone .info-rod .indent{flex-direction: column}
#stone .info-rod h2{font-size: clamp(16px, 3.5vw, 40px); margin-bottom: 20px; width: 100%}
#stone .info-rod p{font-size: clamp(11px, 2.6vw, 20px); width: 100%; margin-bottom: 20px}
#stone .info-rod figure{width: 100%; max-width: 400px; margin: 0 auto}

#sobre .banner{background-image: url(../images/banner_somos_mobile.webp); height: 124.8VW; max-height: 850px; padding: 35px 0}
#sobre .banner > figure{display: none}
#sobre .banner h2{font-size: max(3.25vw, 17px); margin-bottom: 30px}
#sobre .banner h3{font-size: max(4.5vw, 22px); margin-bottom: calc(100% - 180px)}
#sobre .banner p{width: 73vw; margin-bottom: 0; font-size: max(2.5vw, 12px)}
#sobre .content{padding: 30px 0 10px}
#sobre .content p{width: 100%!important; order: 3; font-size: 13px}
#sobre .content h2{font-size: 16px; order: 1}
#sobre .content figure{position: static; order: 2}
#sobre .content .indent{display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px!important}
#sobre .content .servicos figure{width: 126vw; max-width: 500px; margin: 0 auto}
#sobre .content .fornecedores{padding: 0 28px}
#sobre .content .fornecedores figure{width: 89.6vw; max-width: 400px; margin-left: -28px}
#sobre .content .produtos figure{width: 110vw; max-width: 450px; margin-left: auto; margin-right: -28px}
#sobre .content .distribuicao{padding: 0 28px}
#sobre .content .distribuicao figure{width: 91.7vw; max-width: 410px; margin-left: -28px}
#sobre .content .diferenciais figure{width: 92.5vw; max-width: 410px;  margin-left: auto; margin-right: -28px}


@media (max-width: 700px){
    #sobre .banner h3{margin-bottom: calc(100% - 100px)}
}

@media (max-width: 600px){
    #resin .info-mid .resin-item{border-radius: 6px ; width: 190px;  gap: 10px}
    #resin .info-mid .resin-item span{height: 155px}
    #resin .info-mid .resin-item span h3{ font-size: 16px}
    #resin .info-mid h4{font-size: 16px}
}

@media (max-width: 550px){
    #sobre .content .servicos figure{position: relative; left: 50%; transform:translateX(-50%)}

    #depoimento .indent .container{width: 100%}
    #depoimento .indent .container .m-item{ margin: 20px auto 50px auto}
    #depoimento .indent .container .m-item p{font-size: 16px; margin-bottom: 20px}
    #depoimento .indent .container .m-item > div figure{width: 80px; margin-right: 20px}
    #depoimento .indent .container .m-item > div > div h3{font-size: 16px}
    #depoimento .indent .container .m-item > div > div h4{font-size: 13px}

    #depoimento .logo-list figure{width: 100px}
}

@media (max-width: 500px){
    #onde .indent div:last-child > div ul{height: auto}
}

@media (max-width: 450px){
    #onde .indent div:last-child > div ul{gap: 2px 15px}
    #onde .indent div:last-child > div ul li{font-size: 12px}

    #depoimento .indent .container .bottom .b-item{width: 100%; max-width: 300px} 

    #diamond .info-top p{width: 210px;margin: 1vw 0 0 23vw;font-size: 10px}

    #procurement .info-top h2{font-size: 15px; margin-bottom: 30px}

    #stone .info-mid{background-size: 32vw}

    #resin .info-mid .resin-item{border-radius: 6px ; width: 100%}
    #resin .info-mid .resin-item span{height: auto; padding: 10px 0}
    #resin .info-mid .resin-item span h3{ font-size: 14px}
    #resin .info-mid h4{font-size: 14px}

}


@media (max-width: 400px){
    #steel .info-top h2{margin-bottom: 25px}

}

@media (max-width: 370px){
    .contato-sta h2{font-size: 10px}
    .ser-item .info-top p{font-size: 10px}

    #header .indent{height: 62px}
    #header .logo figure{width: 210px}

    #footer .top > div{padding: 6px 16px}
    #footer .top > div p{font-size: 12px}
    #footer .top div a figure{width: 18px}

    #onde .indent div:last-child > div ul{gap: 2px 5px}
    #onde .indent div:last-child > div ul li{font-size: 10px}

    #depoimento .indent h2{font-size: 20px}

    #fiber .info-mid p{font-size: 13px}

    #procurement .info-top h2{margin-bottom: 20px}
    #procurement .info-top p{width: 140px; font-size: 10px}
    #procurement .info-mid p{font-size: 10px; width: 200px}

    #stone .info-top h2{margin-bottom: 14px}
    #stone .info-mid p{font-size: 10px; width: 180px}
    #stone .info-bot h2{font-size: 14px}
    #stone .info-bot p{font-size: 10px; width: 54vw; min-width: unset}

    #resin .info-mid h2{width: 250px; font-size: 16px}

    #depoimento .indent .container .m-item{width: 100%; margin: 20px auto 50px auto}
    #depoimento .indent .container .m-item p{font-size: 14px; margin-bottom: 20px}
    #depoimento .indent .container .m-item > div figure{width: 70px; margin-right: 12px}
    #depoimento .indent .container .m-item > div > div h3{font-size: 14px}
    #depoimento .indent .container .m-item > div > div h4{font-size: 11px}
}