* {margin: 0; padding: 0}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}


html {overflow-y: scroll}
html { min-height: 100%; font-size:16px;  font-family: 'Bahnschrift', sans-serif; color: var(--dark)}
body input,
body select,
body textarea {resize:none; font-family: 'Bahnschrift', sans-serif}
b, strong {font-weight: 700}
a {color:inherit; text-decoration:none}
a:hover {text-decoration:none}
:focus {outline: 0}
.hidden {display: none}
ul, ol, li {list-style: none}
html, #wrapper {height: 100%}
body > #wrapper {height: auto; min-height: 100%; margin: 0; position: relative}
body { /*height: 100%; min-height: 100%;*/ font-family: 'Bahnschrift', sans-serif; color: var(--dark); scroll-behavior: smooth}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height:0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
.clearfix {display: block}
/* End hide from IE-mac */
.left {float:left}
.right {float:right}
.clear {clear:both}
input {border-radius: 5px}
input[type=button], input[type=submit], button {-webkit-appearance: none; -webkit-border-radius: 0}
.hide { display: none !important}
img { display: block; max-width: 100%}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{ font-family: 'Bahnschrift', sans-serif}
/* ESQUELETO */

.wrap-loading {width: 100%; height: 100%; top: 0; left: 0; position: fixed; background: rgba(0,0,0,.6) url(../images/loading.svg) center no-repeat; z-index: 10000; display: none}

.reveal, .revealX, .revealXR {opacity: 0; transition: opacity 1s, transform 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) !important}
.reveal {transform: translateY(60px)}
.revealX {transform: translateX(-60px)}
.revealXR {transform: translateX(60px)}
.reveal--in {opacity: 1; transform: none}

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


.indent { width: 90%; max-width: 1200px; margin: auto}

.desktop { display: block}
.mobile { display: none}

#wrapper { width: 100%; overflow-x: hidden; overflow-y: hidden; padding-top: 62px}


#wrapper > .wrap { padding: 0 0 0}

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

#error404 { padding: 150px 0}
#error404 h1 { font-size: 41px; line-height: 50px; color: #8d8d8d; font-weight: 700 }

body #popup_title,
body #popup_panel input,
body #popup_panel input:hover { background: black; color: #fff}
body #popup_container { border: none}

:root {
    --light: #F3F3F3;
    --grey: #707070;
    --dark: #1C202D;
    --green: #B2D135;
    --orange: #FA4C07;
    --blue: #007CE0;
    --purple: #680055;
    --yellow: #E2AD05;
}

figure .sta{width: 100%; height: auto}
figure .stah{width: auto; height: 100%}

.contato-sta{background-color: var(--orange); padding: 45px 0 55px}
.contato-sta h2{color: #fff; font-size: 30px; margin-bottom: 25px}
.contato-sta a{display: flex; align-items: center; gap: 9px; border-radius: 20px; background-color: var(--green); color:  var(--dark); font-size: 15px; padding: 0 18px; height: 34px; width: fit-content}
.contato-sta a figure{width: 22px}

.banner-ser{background-color: #fff}
.banner-ser figure{width: 100%; margin: 0 auto}

.ser-item .info-top{padding-top: 50px}
.ser-item .info-top p{font-size: 26px; font-weight: 400; line-height: 2em}
.ser-item .info-top h2{font-size: 40px; font-weight: 400; text-align: center}
.ser-item .info-top h2 span{font-weight: 700}
.ser-item .info-mid h2{font-size: 30px; font-weight: 700}

#header{background-color: #fff; position: fixed; top: 0;  width: 100%; z-index: 400; left: 0}
#header .indent{height: 100%; max-width: 1450px}
#header .logo figure{width: 258px}
#header nav{ height: 62px;  width: 100%}
#header nav ul{ height: 100%; gap: 18px}
#header nav ul li{color: var(--grey); text-transform: uppercase; position: relative}
#header nav ul li.list-cont{cursor: pointer}
#header nav ul .list-cont.active{ color: var(--orange)}
#header nav ul li:after{content: " "; position: absolute; width: 0; height: 6px; background-color: var(--orange); bottom: -21px; left: 0;  transition: all 0.3s ease}
#header nav ul li:hover:after,
#header nav ul li.active:after{width: 100%; transition: all 0.3s ease}
#header nav ul .list-cont .list-prod{display: none}
#header nav ul .list-cont.active .list-prod{top: 40px; left: 0; display: flex; flex-direction: column; background-color: #fff; gap: 15px; padding: 25px; width: 220px; z-index: 200} 
#header nav ul .list-cont .list-prod a{ font-size: 14px; color: var(--dark)}
#header nav > div{gap: 23px}
#header nav .btn-con{border-radius: 50px; padding: 0 21px; height: 27px; color: #fff; background-color: var(--green); font-size: 16px}
#header nav .switch { position: relative; display: flex; width: 68px; height: 24px}
#header nav .switch label{height: 24px; width: 34px; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 200; cursor: pointer}
#header nav .switch .label{height: 24px; width: 34px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 190}
#header nav .switch .label .figure{ width: 20px}
#header nav .switch .label .figure img{width: 100%; height: auto}
#header nav .switch input { opacity: 0; width: 1px;  height: 1px; top:0; position: absolute !important}
#header nav .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s;  background-color: #E1E1E1}
#header nav .switch .slider:before { position: absolute; content: ""; height: 24px; width: 34px; left: 0; bottom: 0; background-color: var(--dark); -webkit-transition: .4s; transition: .4s}
#header nav .switch input.uk:checked + .slider:before {left: 34px}


#footer{background-color: var(--light); padding: 70px 0 50px}
#footer .top{margin-bottom: 40px}
#footer .top > figure{width: 150px}
#footer .top > div{border-radius: 50px; background-color: var(--blue); padding: 0 38px; height: 50px;gap: 80px}
#footer .top > div p{color: #fff; font-size: 16px}
#footer .top div a{color: #fff; font-size: 16px}
#footer .top div a:first-child{margin-right: 8px}
#footer .top div a figure{width: 30px}
#footer .top div a:nth-child(2){margin-right: 38px}
#footer .top div a:nth-child(2) figure{margin-right: 8px}
#footer .top div a:last-child figure{margin-right: 8px}
#footer .bottom .nav-swork{display: flex; flex-direction: column; gap: 15px}
#footer .bottom .nav-swork figure{width: 122px}
#footer .bottom .d-flex{gap: 35px}
#footer .bottom .d-flex hr{height: 270px; width: 1px; border: 0; border-right: 1px var(--grey) solid}
#footer .bottom .d-flex nav{padding-top: 15px}
#footer .bottom .d-flex nav ul{display: flex; flex-direction: column; gap: 15px}
#footer .bottom .d-flex nav ul li{font-size: 20px; margin-right: 30px; text-transform: uppercase}
#footer .bottom .d-flex > div{padding-top: 15px}
#footer .bottom .d-flex > div h2{font-size: 20px; margin-bottom: 26px}
#footer .bottom .d-flex > div a:nth-child(2){font-size: 18px; font-weight: 300}
#footer .bottom .d-flex > div .tel{ margin-top: 20px; margin-bottom: 2px}
#footer .bottom .d-flex > div .tel a{font-size: 20px}
#footer .bottom .d-flex > div .tel a span{font-weight: 500}
#footer .bottom .d-flex > div > a.email{ font-size: 20px; margin-bottom: 15px; display: block}
#footer .bottom .d-flex > div > a.email span{font-weight: 500; color: var(--blue)}

#rodape{background-color:  var(--dark); padding: 26px 0} 
#rodape p{color: #fff} 
#rodape div{gap: 6px}
#rodape div p{font-size: 12px}
#rodape div figure{width: 59px}


#depoimento{background: url(../images/depoimento_dec.svg); background-repeat: no-repeat; background-size: 1920px; background-position: bottom; padding: 126px 0 216px}
#depoimento .indent{justify-content: space-between}
#depoimento .indent h2{font-size: 40px; font-weight: 400; text-transform: uppercase}
#depoimento .indent h2 span{font-weight: 700}
#depoimento .indent .container{width: 600px}
#depoimento .indent .container .t-item{height: 88px; border-bottom: 2px var(--grey) solid; align-items: flex-end; padding: 0 25px 22px 25px; cursor: pointer}
#depoimento .indent .container .t-item.slick-current{border-bottom: 4px var(--orange) solid}
#depoimento .indent .container .t-item figure{width: 100px; margin: 0 auto}
#depoimento .indent .container .slider-nav{}
#depoimento .indent .container .slider-nav .slick-arrow::before{ font-size: 40px; color: var(--dark); font-weight: 700; font-family: 'Bahnschrift'}
#depoimento .indent .container .slider-nav .slick-prev::before{content: '<'}
#depoimento .indent .container .slider-nav .slick-next::before{content: '>'}
#depoimento .logo-list{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 30px}
#depoimento .logo-list figure{width: 130px; margin: 0 auto}

#depoimento .indent .container .bottom{height: 350px; position: relative;margin-top: 48px}
#depoimento .indent .container .bottom .b-item{width: 550px}
#depoimento .indent .container .bottom .b-item p{font-size: 20px; font-weight: 300; margin-bottom: 30px}
#depoimento .indent .container .bottom .b-item > div{gap: 20px}
#depoimento .indent .container .bottom .b-item > div figure{width: 110px}
#depoimento .indent .container .bottom .b-item > div figure img{border-radius: 100px}
#depoimento .indent .container .bottom .b-item > div > div h3{ font-size: 18px; font-weight: 700}
#depoimento .indent .container .bottom .b-item > div > div h4{ font-size: 14px; font-weight: 300}


#onde{background-color: var(--purple); background-image: url(../images/onde_bg.svg); background-size: 726px; background-position: -308px 0; background-repeat: no-repeat; padding: 122px 0 156px}
#onde .indent {justify-content: space-between; gap: 15px}
#onde .indent div:first-child{color: #fff; padding-left: 200px}
#onde .indent div:first-child h2{font-size: 40px; font-weight: 700; margin-bottom: 48px}
#onde .indent div:first-child h3{font-size: 24px; font-weight: 700; width: 238px; text-transform: uppercase}
#onde .indent div:first-child hr{width: 100px; border: 0; border-bottom: 3px white solid; margin: 48px 0}
#onde .indent div:first-child p{font-size: 24px; font-weight: 400; width: 238px;text-transform: uppercase}
#onde .indent div:last-child figure{width: 595px; margin-bottom: 22px}
#onde .indent div:last-child > div{width: 100%}
#onde .indent div:last-child > div ul{display: flex;flex-direction: column;gap: 2px 50px;flex-wrap: wrap; height: 105px}
#onde .indent div:last-child > div ul li{font-size: 16px; font-weight: 300; color: #fff}


#home .banner{background-color: var(--dark); padding: 50px 0 42px; margin-bottom: 55px; min-height: 24.1vw}
#home .banner .indent{max-width: 1300px}
#home .banner .indent .item figure{width: 160px; margin: 20px auto 0; transition: all 0.2s ease}
#home .banner .indent .item:hover figure{margin-top: 0; transition: all 0.2s ease}
#home .uniao{padding: 90px 0 175px}
#home .uniao .indent{margin-left: 200px}
#home .uniao h2{font-size: 40px; font-weight: 400;  line-height: 1.4em; margin-bottom: 30px}
#home .uniao h2 span{font-weight: 700}
#home .uniao a{color: var(--orange); font-size: 20px;font-weight: 300}
#home .uniao a figure{width: 108px}
#home .uniao > figure{width: 782px; bottom: 0; right: 0}


#sobre .banner{background-image: url(../images/banner_somos.webp); background-size: cover; width: 100%; height: 50.78vw; padding: 85px 0 0}
#sobre .banner h2{ color: var(--blue); font-size: 40px; font-weight: 700; margin-bottom: 110px}
#sobre .banner h3{font-size: 60px; font-weight: 300; color: #fff; margin-bottom: 68px}
#sobre .banner h3 span{font-weight: 700}
#sobre .banner p{font-size: 18px; font-weight: 300; color: #fff; width: 535px}
#sobre .banner > figure{width: 430px; right: -290px; bottom: 0}
#sobre .content{padding: 68px 0 100px}
#sobre .content h2{font-size: 40px; font-weight: 700; margin-bottom: 30px}
#sobre .content p{font-size: 16px; font-weight: 300; line-height: 1.5em}
#sobre .content .con-top{margin-bottom: 60px}
#sobre .content .servicos{margin-bottom: 132px}
#sobre .content .servicos h2{color: var(--orange)}
#sobre .content .servicos p{width: 737px}
#sobre .content .servicos figure{width: 650px; top: 0; right: -150px}
#sobre .content .fornecedores{margin-bottom: 126px; padding-left: 595px}
#sobre .content .fornecedores h2{ color: var(--green)}
#sobre .content .fornecedores p{width: 536px}
#sobre .content .fornecedores figure{width: 563px; top: 0; left: -100px}
#sobre .content .produtos{margin-bottom: 100px}
#sobre .content .produtos h2{color: var(--purple)}
#sobre .content .produtos p{width: 676px}
#sobre .content .produtos figure{width: 563px; top: 0; right: -50px}
#sobre .content .distribuicao{margin-bottom: 176px; padding-left: 595px}
#sobre .content .distribuicao h2{color: var(--blue)}
#sobre .content .distribuicao p{width: 425px}
#sobre .content .distribuicao figure{width: 668px; top: 0; left: -100px}
#sobre .content .diferenciais h2{color: var(--grey)}
#sobre .content .diferenciais p{width: 494px}
#sobre .content .diferenciais figure{width: 717px;top: 0; right: -50px}


#diamond .info-top{background-image: url(../images/dia_banner.webp); background-size: cover; height: 37.5VW}
#diamond .info-top h2{color: #fff; margin-bottom: 8vw}
#diamond .info-top p{ width: clamp(10px, 57.1vw, 800px); font-size: clamp(10px, 1.85vw, 26px); margin: 96px 0 0 auto}
#diamond .info-mid{background-image: url(../images/dia_mid_bg.webp); background-position: right; background-size: contain; background-repeat: no-repeat; padding: 72px 0}
#diamond .info-mid h2{margin-bottom: 50px}
#diamond .info-mid p{font-size: 23px; line-height: 1.4em; width: 500px}
#diamond .info-mid figure{max-width: 680px; width: 48.5vw; margin-left: -50px}
#diamond .contato-sta{background-color: var(--dark)}
#diamond .contato-sta h2{color: #fff}
#diamond .contato-sta a{background-color: var(--green)}

#fiber .info-top{background-color: var(--light); background-image: url(../images/fiber_dec.webp); background-size: contain; background-repeat: no-repeat; background-position: right; padding-bottom: 7.5vw}
#fiber .info-top h2{color: var(--purple); margin-bottom: 90px}
#fiber .info-top p{width: 600px; margin: 0 auto; text-align: center}
#fiber .info-mid{padding: 73px 0 152px; background-image: url(../images/fiber_mid_bg.webp); background-repeat: no-repeat; background-position: 0 100%; background-size: 200px}
#fiber .info-mid h2{margin-bottom: 50px}
#fiber .info-mid .d-flex{justify-content: space-between; margin-bottom: 50px}
#fiber .info-mid .d-flex .fiber-item{width: 24%}
#fiber .info-mid .d-flex .fiber-item span{width: 100%; height: 68px; padding: 5px 0; background-color: var(--purple); border-radius: 6px 6px 0 0;  display: block}
#fiber .info-mid .d-flex .fiber-item span h3{color: #fff; font-size: 23px; text-align: center; background-color: var(--purple); border-radius: 6px 6px 0 0}
#fiber .info-mid .d-flex .fiber-item figure{width: 100%}
#fiber .info-mid p{font-size: 21px; font-weight: 400; line-height: 1.5em}
#fiber .contato-sta{background-color: var(--purple)}
#fiber .contato-sta h2{color: #fff}
#fiber .contato-sta a{background-color: var(--green); color: #fff}

#procurement .info-top{background-image: url(../images/procu_banner.webp); background-size: cover; height: 37.5VW}
#procurement .info-top h2{color: var(--blue); margin-bottom: 67px}
#procurement .info-top p{width: 454px}
#procurement .info-mid{background-image: url(../images/procu_content.webp); background-size: cover; height: 39vw; padding-top: 94px}
#procurement .info-mid p{font-size: 18px; font-weight: 400;  text-align: end; width: 620px; margin: 0 0 0 auto; line-height: 1.4em}
#procurement .contato-sta{background-color: var(--blue)}
#procurement .contato-sta h2{color: #fff}
#procurement .contato-sta a{background-color: var(--green); color: #fff}

#resin .info-top{background-color: var(--light); padding: 50px 0 85px}
#resin .info-top h2{color: var(--green); margin-bottom: 68px}
#resin .info-top p{width: 641px}
#resin .info-top figure{width: 40vw; margin-right: -100px}
#resin .info-mid{padding: 90px 0 127px}
#resin .info-mid h2{margin-bottom: 44px; font-size: 30px}
#resin .info-mid .d-flex{justify-content: space-between}
#resin .info-mid .resin-item{border-radius: 6px 6px 6px 6px; border: 2px var(--green) solid; width: 270px}
#resin .info-mid .resin-item span{background-color: var(--green); display: flex; height: 185px; align-items: center; justify-content: center}
#resin .info-mid .resin-item span h3{ font-size: 20px; text-align: center; width: 100%; padding: 0 10px}
#resin .info-mid h4{font-size: 21px;font-weight: 400;line-height: 1.5em; margin-top: 40px}
#resin .info-mid > figure{width: 334px; top: 50%; right: -160px; transform: translateY(-50%)}
#resin .contato-sta{background-color: var(--green)}
#resin .contato-sta h2{color: var(--dark)}
#resin .contato-sta a{background-color: var(--dark); color: #fff}

#steel .info-top{background-image: url(../images/steel_banner.webp); background-size: cover; height: 37.5VW}
#steel .info-top h2{color: var(--yellow); margin-bottom: 80px}
#steel .info-top p{color: #fff; width: 580px;margin-left: auto}
#steel .info-mid{background-color: var(--light); padding-top: 92px}
#steel .info-mid > div{justify-content: space-between}
#steel .info-mid p{width: 637px; line-height: 1.4em; font-size: 20px}
#steel .info-bot{padding:  95px 0 74px}
#steel .info-bot .container{background-color: var(--light); padding: 30px 76px 16px 38px; max-width: 1030px; margin: 0 auto; gap: 15px; align-items: flex-start; flex-wrap: wrap}
#steel .info-bot .container .cont-foot{width: 100%}
#steel .info-bot .container .cont-foot p{width: 100%; max-width: 100%}
#steel .info-bot .container figure{width: 382px}
#steel .info-bot .container h2{font-size: 20px; color: var(--dark); font-weight: 600; margin-bottom: 30px}
#steel .info-bot .container p{font-size: 18px; font-weight: 300; max-width: 476px}
#steel .contato-sta{background-color: var(--yellow)}
#steel .contato-sta h2{color: #fff}
#steel .contato-sta a{background-color: var(--dark); color: #fff}

#stone .info-top{height: 37.5VW; background-image: url(../images/stone_banner.webp); background-size: cover}
#stone .info-top h2{color: var(--orange); margin-bottom: 7vw}
#stone .info-top p{width: 33vw; font-size: 2.1vw; text-align: center; margin: 0 auto; color: #fff}
#stone .info-mid{background-color: var(--light); background-image: url(../images/stone_img.webp); background-size: 300px; background-position: right; background-repeat: no-repeat; padding: 93px 0 122px}
#stone .info-mid h2{color: var(--orange); margin-bottom: 23px}
#stone .info-mid p{width: 637px ; font-size: 20px; font-weight: 400}
#stone .info-mid p span{font-weight: 600}
#stone .info-bot{padding: 91px 0 106px; background-image: url(../images/stone_img_bot.webp); background-size: 395px; background-position: 0 0; background-repeat: no-repeat}
#stone .info-bot .indent{padding-left: 350px}
#stone .info-bot h2{color: var(--orange); font-weight: 700; font-size: 40px; margin-bottom: 24px}
#stone .info-bot p{font-size: 20px; font-weight: 400; width: 637px; line-height: 1.4em}
#stone .info-bot p span{font-weight: 700}
#stone .info-rod{padding-top: clamp(10px, 7.03125vw, 90px); background-color: #F3F3F3}
#stone .info-rod .indent{justify-content: space-between}
#stone .info-rod h2{color: var(--orange); font-size: clamp(12px, 3.125vw, 40px); margin-bottom: clamp(10px, 2.1875vw, 28px); width: clamp(100px, 54.6875vw, 700px)}
#stone .info-rod p{font-size: clamp(11px, 1.5625vw, 20px); width: clamp(100px, 45.46875VW, 582px)}
#stone .info-rod figure{width: clamp(100px, 46.4vw, 594px); margin-right: clamp(-94px, -7.34375VW, -10px)}
#stone .contato-sta{background-color: var(--orange)}
#stone .contato-sta h2{color: #fff}
#stone .contato-sta a{background-color: var(--dark); color: #fff}

@media (max-width: 1400px){
    #resin .info-mid > figure{ right: -190px}

    #fiber .info-top p{width: 550px}
}

@media (max-width: 1300px){
    #home .uniao > figure{width: 730px}

    #onde .indent div:last-child > div ul{gap: 2px 30px}
    #onde .indent div:last-child figure{width: 500px}

    .ser-item .info-mid h2{font-size: 22px}
    .ser-item .info-top p{font-size: 21px}

    #sobre .banner > figure{width: 34.3vw; right: -22.6vw}
    #sobre .content h2{margin-bottom: 20px; font-size: 32px}
    #sobre .content p{font-size: 14px}
    #sobre .content .servicos p{width: 570px}
    #sobre .content .servicos figure{width: 650px}
    #sobre .content .fornecedores{padding-left: 450px}
    #sobre .content .fornecedores figure{width: 520px}
    #sobre .content .produtos figure{width: 500px}
    #sobre .content .produtos p{width: 620px}
    #sobre .content .distribuicao{padding-left: 550px}
    #sobre .content .distribuicao figure{width: 600px}
    #sobre .content .diferenciais figure{width: 620px}

    #fiber .info-top p{width: 450px}

    #resin .info-top p{width: 500px}
    #resin .info-mid .resin-item{width: 240px}
    #resin .info-mid .resin-item span{height: 175px}
    #resin .info-mid .resin-item span h3{ font-size: 18px}

    #steel .info-bot{padding:  60px 0 40px}
    #steel .info-bot .container{padding: 20px 50px 10px 22px}
    #steel .info-bot .container figure{width: 39vw}
    #steel .info-bot .container h2{font-size: 18px; margin-bottom: 22px}
    #steel .info-bot .container p{font-size: 15px; width: 39vw}

    #diamond .info-mid p{width: 400px; font-size: 20px}
}

@media (max-width: 1100px){
    .ser-item .info-top h2{font-size: 36px}

    .contato-sta h2{font-size: 24px}

    #header nav ul{gap: 11px}
    #header nav ul li{font-size: 13px}
    #header nav > div{gap: 10px}
    #header nav .btn-con{font-size: 13px}
    #header nav ul li:after{bottom: -23px}


    #home .uniao{padding: 5vw 0 15vw}
    #home .uniao .indent{margin-left: 15vw}
    #home .uniao > figure{width: 65vw}
    #home .banner .indent .item{width: 14vw; display: block}
    #home .banner .indent .item figure{width: 100%}

    #onde .indent div:first-child h2{font-size: 30px}
    #onde .indent div:first-child h3,
    #onde .indent div:first-child p{font-size: 18px; width: 175px}
    #onde .indent div:last-child figure{width: 420px}
    #onde .indent div:last-child > div ul{height: 78px}
    #onde .indent div:last-child > div ul li{font-size: 12px}

    #sobre .content h2{margin-bottom: 16px; font-size: 28px}
    #sobre .content p{font-size: 12px}
    #sobre .banner h2{margin-bottom: 5vw; font-size: 32px}
    #sobre .banner h3{margin-bottom: 3vw; font-size: 50px}
    #sobre .banner p{font-size: 15px}
    #sobre .content .servicos p{width: 470px}
    #sobre .content .servicos figure{width: 550px}
    #sobre .content .fornecedores{}
    #sobre .content .fornecedores p{width: 400px}
    #sobre .content .fornecedores figure{width: 500px}
    #sobre .content .produtos p{width: 530px}
    #sobre .content .produtos figure{width: 440px}
    #sobre .content .distribuicao{padding-left: 470px}
    #sobre .content .distribuicao figure{width: 530px}
    #sobre .content .diferenciais  p{width: 500px}
    #sobre .content .diferenciais figure{width: 510px}

    #diamond .info-top p{margin: 5vw 0 0 auto}
    #diamond .info-mid p{font-size: 19px}

    #fiber .info-top{padding-bottom: 7.2vw}
    #fiber .info-top h2{margin-bottom: 50px}
    #fiber .info-mid p{font-size: 15px}

    #procurement .info-top p{width: 380px}

    #resin .info-mid .resin-item{width: 205px}
    #resin .info-mid .resin-item span{height: 175px}
    #resin .info-mid .resin-item span h3{ font-size: 16px}

    #steel .info-top p{width: 510px}

    #steel .info-bot .container{padding: 20px 20px 10px}
    #steel .info-bot .container figure{width: 40vw}
    #steel .info-bot .container h2{font-size: 16px; margin-bottom: 20px}
    #steel .info-bot .container p{font-size: 13px; width: 40vw}

    #stone .info-mid{padding: 60px 0 90px; background-size: 190px}
    #stone .info-mid p{font-size: 16px; width: 550px}
    #stone .info-bot{background-size: 335px}
    #stone .info-bot h2{font-size: 32px; margin-bottom: 18px}
    #stone .info-bot p{width: 520px; font-size: 16px}

    #footer .top > div{padding: 0 25px; gap: 55px; height: 45px}
    #footer .top > div p{font-size: 15px}
    #footer .top div a{font-size: 15px}
    #footer .top div a figure{width: 24px}
    #footer .top div a:nth-child(2){margin-right: 34px}
}

@media (max-width: 1000px){
    .ser-item .info-top{padding-top: 30px}
    .ser-item .info-top h2{font-size: 32px}

    #procurement .info-mid{padding-top: 60px}
    #procurement .info-mid p{font-size: 14px; width: 510px}

    #resin .info-top figure{width: 340px}
    #resin .info-mid h4{font-size: 18px}

    #depoimento .indent .container{width: 500px}

    #diamond .info-mid h2{font-size: 20px}
    #diamond .info-mid p{font-size: 17px; width: 400px}
}


@media (max-width: 950px){
    .ser-item .info-top h2{font-size: 30px}
    .ser-item .info-top p{font-size: 18px}

    .ser-item .info-mid h2{font-size: 19px}
    
    .contato-sta h2{font-size: 22px; margin-bottom: 20px}
    .contato-sta a{font-size: 13px; height: 28px}
    .contato-sta a figure{width: 18px}

    #header .logo figure{width: 200px}
    #header nav ul{gap: 8px}
    #header nav ul li{font-size: 10px}
    #header nav > div{gap: 8px}
    #header nav .btn-con{font-size: 10px}
    #header nav .btn-con{border-radius: 50px; padding: 0 21px; height: 27px; color: #fff; background-color: var(--green); font-size: 12px}
    #header nav .switch { width: 52px; height: 20px}
    #header nav .switch label{height: 20px; width: 26px}
    #header nav .switch label .figure{ width: 18px}
    #header nav .switch .slider:before {  height: 20px; width: 26px}
    #header nav .switch input.uk:checked + .slider:before {left: 26px}
    #header nav ul .list-cont.active:after{bottom: -25px}
    #header nav ul .list-cont.active .list-prod{top: 37px}
    #header nav ul li:after{bottom: -25px}


    #home .uniao h2{font-size: 32px}

    #onde{padding: 50px 0 60px; background-size: 450px; background-position: -230px 0}
    #onde .indent div:first-child{padding-left: 100px}

    #depoimento .indent h2{font-size: 30px}
    #depoimento .indent .container .t-item figure{width: 80px}
    #depoimento .indent .container .bottom .b-item{width: 450px}
    #depoimento .indent .container .bottom .b-item p{font-size: 16px}

    #footer .top > div{padding: 0 20px; gap: 50px; height: 40px}
    #footer .top > div p{font-size: 14px}
    #footer .top div a{font-size: 14px}
    #footer .top div a figure{width: 22px}
    #footer .top div a:nth-child(2){margin-right: 30px}

    #sobre .banner{padding: 60px 0 0}
    #sobre .banner h2{font-size: 27px}
    #sobre .banner h3{font-size: 40px}
    #sobre .banner p{font-size: 12px; width: 450px}
    #sobre .content h2{margin-bottom: 15px; font-size: 24px}
    #sobre .content p{font-size: 11px}
    #sobre .content .servicos p{width: 400px}
    #sobre .content .servicos figure{width: 500px}
    #sobre .content .fornecedores{padding-left: 380px}
    #sobre .content .fornecedores p{width: 320px}
    #sobre .content .fornecedores figure{width: 400px; left: -50px}
    #sobre .content .produtos p{width: 460px}
    #sobre .content .produtos figure{width: 365px}
    #sobre .content .distribuicao{padding-left: 400px}
    #sobre .content .distribuicao figure{width: 470px}
    #sobre .content .diferenciais  p{width: 400px}
    #sobre .content .diferenciais figure{width: 430px}

    #diamond .info-top p{width: 480px}
    #diamond .info-mid h2{margin-bottom: 36px; font-size: 18px}
    #diamond .info-mid p{font-size: 15px; width: 350px}

    #fiber .info-top{padding-bottom: 50px}
    #fiber .info-top p{width: 400px}
    #fiber .info-top h2{margin-bottom: 30px}

    #procurement .info-top h2{margin-bottom:40px}
    #procurement .info-top p{width: 320px}

    #resin .info-top p{width: 400px}
    #resin .info-mid h2{font-size: 22px}
    #resin .info-mid > figure{ right: -170px; width: 250px}
    #resin .info-mid .resin-item{width: 172px}
    #resin .info-mid .resin-item span{height: 140px}
    #resin .info-mid .resin-item span h3{ font-size: 14px}

    #steel .info-top h2{margin-bottom: 50px}
    #steel .info-top p{width: 410px}
    #steel .info-mid p{font-size: 17px}

    #steel .info-bot .container{padding: 15px 15px 10px}
    #steel .info-bot .container h2{font-size: 14px; margin-bottom: 15px}
    #steel .info-bot .container p{font-size: 12px}

    #stone .info-bot h2{font-size: 28px}
    #stone .info-bot p{width: 400px; font-size: 14px}
}