/* Variables */

:root{
	
	--main-color: #D85413;
	
}

/* Fonts */

@font-face{
	
	src: url(../fonts/calibri.ttf);
	font-family: 'Calibri';
	font-weight: 400;
	
}

@font-face{
	
	src: url(../fonts/calibri_bold.ttf);
	font-family: 'Calibri';
	font-weight: 700;
	
}

@font-face{
	
	src: url(../fonts/calibri_light.ttf);
	font-family: 'Calibri';
	font-weight: 100;
	
}

@font-face{
	
	src: url(../fonts/impact.ttf);
	font-family: 'Impact';
	
}

/* Default Behaviour */

html, body{margin: 0; font-family: 'Calibri'; font-size: 1.25rem;}

h3{font-family: 'Impact'; font-size: 2.5rem; margin: 0 0 .5em; display: flex; align-items: center; text-transform: uppercase; position: relative;}
h3:before{content: url(../images/faixa.svg); width: 430px; display: block; margin-right: 15px;}
h3.content{margin: 0 auto .5em; flex-direction: row;}
h3.accent{margin-bottom: 1.5em;}
h3.accent:before{width: 100%; position: absolute; z-index: -1; transform: scaleX(-1); filter: brightness(0); opacity: .1;}

section{padding: 50px 0;}

form{display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; justify-content: center;}
form label{font-size: .8em; margin-bottom: 10px;}
form :is(input, textarea){padding: 10px; border: 1px solid #707070; font: inherit; font-size: 1rem; box-sizing: border-box;}
form textarea{width: clamp(100%, 100%, 100%); height: clamp(200px, 200px, 600px); resize: vertical;}

a{text-decoration: none; color: inherit;}

img, svg{max-width: 100%; vertical-align: bottom; user-select: none;}
button{border: 0;}
hr:not(.line){content: url(../images/faixa.svg); border: 0; opacity: .1; filter: brightness(0); margin: 0;}
hr.line{margin: 0 20px; border: 1px solid #fff; align-self: stretch;}

ul{padding-left: 80px; margin: 0;}
ul li{padding-left: 20px; margin-bottom: 25px;}
ul li::marker{content: url(../images/faixa_listas.svg);}

*::selection{background-color: var(--main-color); color: #fff;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto; display: flex; flex-direction: column;}

.slider{overflow: hidden;}
.slider .mat{display: flex; align-items: flex-end;}
.slider .mat:not(.removing){transition: all .5s ease;}
.slider .mat .item{width: 25%; padding: 0 25px; box-sizing: border-box; flex: 0 0 auto;}

ul.rtl{direction: rtl; padding: 0 80px 0 0;}
ul.rtl li{padding: 0 20px 0 0;}
ul.rtl li::marker{content: url(../images/faixa_listas_rtl.svg);}

.btn{background-color: var(--main-color); border-radius: 5px; color: #fff; padding: 10px 100px; font-weight: bold; cursor: pointer; font-size: 1rem;}

form .inputBox{display: flex; flex-direction: column;}
form :is(.full, textarea){flex: 0 0 100%;}
form .half{flex: 1 1 calc(50% - 10px);}

a.floatingWpp{display: block; position: fixed; bottom: 50px; right: 5vw;}

/* TopBar */

.topBar{flex-direction: row; font-size: 0.9rem; justify-content: space-between; background-color: #f1f1f1; display: flex; padding: 10px 5vw; flex-wrap: wrap;}
.topBar span{cursor: pointer;}
.topBar > *{display: flex; align-items: center;}
.topBar > * i{width: 10px; margin-right: 10px;}
.topBar a i{width: 20px;}

/* Header */

header#mainHeader{padding: 30px 0; border-bottom: 1px solid #707070; position: relative;}
header#mainHeader:before{content: ''; position: absolute; top: calc(30px + 1.25rem + 50px); left: 0; right: 0; height: 20px; border-top: 9px solid; border-bottom: 3px solid; color: var(--main-color); z-index: -1;}
header#mainHeader:after{content: url(../images/faixa.svg); position: absolute; right: 0; top: calc(30px + 1.25rem + 50px + 31px); width: 35%;}
header#mainHeader .content{flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative;}
header#mainHeader .logo{max-width: 45%;}
header#mainHeader nav#mainMenu{display:flex; column-gap: 30px; line-height: 1em;}
header#mainHeader nav#mainMenu span{cursor: pointer; font-weight: bold;}
header#mainHeader .contact{position: absolute; top: calc(30px + 1.25rem + 50px + 31px + 70px); right: 0; width: 45%; font-size: clamp(2rem, 3.5rem, calc(20 * 3.5 * 100vw / 1920)); text-align: right; font-family: 'Impact'; text-transform: uppercase; border-right: 10px solid var(--main-color); padding-right: 20px; box-sizing: border-box; z-index: 9}

/* Banner */

div.banner{border-bottom: 1px solid #707070; border-top: 1px solid #707070; /*min-height: 350px;*/ overflow: hidden; position: relative;}
div.banner img{min-width: 100%; height: 100%;}
div.banner a.contact{display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); border: 2px solid #fff; color: #fff; padding: 10px 50px; border-radius: 5px;}

/* Partners Section */

section#partners .content{flex-direction: row; align-items: center;}

/* About Section */

section#about big{font-size: 1.5em; text-align: center; display: block;}

/* Services Section */

section#services .content{flex-direction: row;}
section#services .content ul{box-sizing: border-box;}
section#services .content > *{flex: 0 0 50%;}

/* Section Sales */

section#sales .content:not(h3){flex-direction: row; align-items: center; justify-content: space-between;}
section#sales svg{width: 40%;}
section#sales ul{width: 50%;}

/* Section Clients */

section#clients .slider .mat{align-items: center;}
section#clients .slider .mat .item{width: 20%;}

/* Section Contact */

section#contact .content{flex-direction: row; align-items: center;}
section#contact .content > *{flex: 0 0 50%;}
section#contact .mapBox{position: relative;}
section#contact .mapBox:before{content: ''; position: absolute; font-size: 2.5rem; top: calc(-2.5em + 20px); left: calc(15% - 20px); right: calc(15% + 20px); bottom: -20px; background-color: var(--main-color); z-index: -1;}
section#contact .mapBox iframe{width: 70%; font-size: 2.5rem; margin: -2.5em auto 0; display: block; border: 0;}

/* Footer */

footer#mainFooter{background-color: #707070; position: relative; margin-top: 50px; font-size: 1rem; color: #fff; padding: 50px 0; overflow: hidden;}
footer#mainFooter:before,
footer#mainFooter:after{content: url(../images/faixa.svg); position: absolute; width: 45%; filter: brightness(0) invert(1); opacity: .3;}
footer#mainFooter:before{bottom: 0; left: 0; transform: scaleX(-1) translateY(5%);}
footer#mainFooter:after{top: 0; right: 0;}
footer#mainFooter i{margin-right: 20px;}
footer#mainFooter .flex{display: flex; align-items: center;}
footer#mainFooter .content{flex-direction: row; justify-content: space-between; width: 90vw;}
footer#mainFooter .side{flex: 0 0 45%; display: flex; align-items: center; justify-content: space-around;}
footer#mainFooter .side:first-child{padding-bottom: 100px;}
footer#mainFooter .side:last-child{padding-top: 100px;}
footer#mainFooter .side:last-child .flex{justify-content: center;}
footer#mainFooter .side time{white-space: nowrap;}
footer#mainFooter .side time span{display: inline-block; width: 100px;}
footer#mainFooter .side b{text-transform: uppercase;}

/* Responsive */

@media (max-width: 1200px){
	
	footer#mainFooter .content{flex-direction: column;}
	footer#mainFooter .side{padding: 0 !important;}
	footer#mainFooter .side:first-child{margin-bottom: 50px;}
	
}


@media(max-width: 768px){
	
	h3:not(.accent){justify-content: center; text-align: center;}
	h3:not(.accent):before{display: none;}
	
	header#mainHeader:before{top: 50px;}
	header#mainHeader:after{top: 80px; width: 80%; z-index: -1;}
	header#mainHeader .content{justify-content: center;}
	header#mainHeader nav#mainMenu{display: none;}
	header#mainHeader .contact{top: calc(100% + 50px); width: 70%; z-index: 10;}
	
	div.banner a.contact{display: block;}
	
	section#partners .content > img{display: none;}
	
	section#services .content{position: relative;}
	section#services .content > *{flex: 0 0 100%;}
	section#services svg{position: absolute; top: 50%; right: 0; left: 0; transform: translateY(-50%); opacity: 0.5; z-index: -1;}
	
	section#sales .content{position: relative;}
	section#sales svg{position: absolute; top: 50%; left: 0; right: 0; width: 100%; transform: translateY(-50%); opacity: .5; z-index: -1;}
	section#sales ul{width: 100%;}
	
	section#contact .mapBox iframe{width: 90%;}
	section#contact .mapBox:before{top: calc(-2.5em + 20px); left: calc(5% - 20px); right: calc(5% + 20px); bottom: -20px;}
	
}

@media(max-width: 425px){
	
	body, html{font-size: 1rem;}
	
	h3.accent{text-align: center;}
	h3.accent:before{display: none;}
	
	.slider .mat .item{width: 50%;}

	.paletrans {height: 650px}
	
	section#clients .slider .mat .item{width: 50%;}
	
	section#contact h3{margin-bottom: .5em;}
	section#contact .content{flex-direction: column;}
	section#contact .mapBox{width: 100%; margin-top: 50px; padding: 0 0 20px 20px;}
	section#contact .mapBox:before{top: 20px; left: 0; right: 20px; bottom: 0;}
	section#contact .mapBox iframe{width: 100%; margin: 0;}
	
	footer#mainFooter{padding: 100px 0;}
	footer#mainFooter:before,
	footer#mainFooter:after{width: 100%;}
	footer#mainFooter:before{transform: scaleX(-1) translateY(10%);}
	footer#mainFooter .side{flex-direction: column;}
	footer#mainFooter .side hr.line{display: none;}
	footer#mainFooter .side > *:last-child{margin-top: 50px;}
	
}