/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&family=Titan+One&display=swap");

/* Variables */

:root{

	--main-color: #000000;
	--bright-accent-color: #FCC101;
	--dark-accent-color: #FCC101;
	--bg-color: #fff;

}

/* Fonts */

/*@font-face{
	src: url("../src/fonts/Akrobat/Akrobat-Black.otf");
	font-family: 'Akrobat';
	font-weight: 900;
}*/

/* Default Behaviour */

body, html{scroll-behavior: smooth;}

h3{font-size: 3rem; text-transform: uppercase; font-weight: 900; color: var(--dark-accent-color);}
h4{color: #4e4d4d; font-size: 1.25rem;}
h4 strong{font-weight: 900;}

a{color: inherit; text-decoration: none;}
img, svg{max-width: 100%; vertical-align: bottom;}

*{margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Montserrat, "Open Sans", "Helvetica Neue", sans-serif;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.row,
.column{display: flex; gap: inherit; align-items: inherit;}
.row{flex-direction: row;}
.column{flex-direction: column;}

.grid{display: grid; gap: inherit;}
.grid.layered{place-items: center; place-content: center;}
.grid.layered > *, .grid.layered:before, .grid.layered:after{grid-row: 1; grid-column: 1;}

dialog:not([open]){opacity: 0; pointer-events: none;}

.timer{position: relative; z-index: 1;}
.timer canvas{background-image: linear-gradient(180deg, #8a9bea, #1331b3, #0027b0, #0e2a86); border-radius: 50%; z-index: -1;}
.timer span{color: #fff; z-index: 1;}
.timer span:before{content: attr(data-time); font-size: 1.5em;}

.button{text-transform: uppercase; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 100vw; font-size: 1.5rem; font-weight: 900; user-select: none;}

.button.wpp{background-color: #45bf35; justify-content: center;}
.button.wpp svg{flex: 0 0 auto; height: auto; width: 30px;}

.button.wpp:not(.static){width: fit-content; align-self: center; padding: 20px 40px 20px 60px; font-style: italic; color: #1e1e1e; border-radius: 0 100vw 100vw 0; position: relative; animation: pulsate 1.5s ease-in-out infinite;}
.button.wpp:not(.static):before{content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 40px; background-color: var(--bg-color); border-top-right-radius: 100vw;}

.button.wpp.default{padding: 10px 30px; border-radius: 100vw;}
.button.wpp.default:before{display: none;}

/* Product Info Dialog */

body:has(dialog.productInfo[open]){overflow: hidden;}
dialog.productInfo{top: 50%; left: 50%; translate: -50% -50%; gap: 50px;}
dialog.productInfo::backdrop{background-color: rgba(0 0 0 / 60%);}
dialog.productInfo .column{align-items: center; gap: 0;}
dialog.productInfo .column > img{width: 400px;}
dialog.productInfo .column .info{width: 100%; padding: 30px; align-items: center; background-color: #d5d5d5; border-radius: 20px; gap: 10px;}
dialog.productInfo .column .info p:first-child{font-size: .875rem; color: rgba(0 0 0 / 40%);}
dialog.productInfo .column .info .row{align-items: center; gap: 20px;}
dialog.productInfo .column .info .row .column{align-items: center; gap: 5px;}
dialog.productInfo .column > p:last-child{width: 400px; padding: 10px 20px; background-color: #fff;}
dialog.productInfo a{color: #fff;}

/* Cookie Alert */

#cookies-alert{top: 0; left: 0; width: 100%; background-color: #2b2e32; color: #fff; font-size: 14px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 50px; border-bottom: 1px solid #fff;}
#cookies-alert .buttons button{border: none; outline: unset; cursor: pointer; font-size: 14px; border-radius: 10px;}
#cookies-alert .buttons .btn-accept{position: relative; background-color: #fff; color: #243563; padding: 10px 20px; font-weight: 600; -webkit-transition: 0.3s; transition: 0.3s;}
#cookies-alert .buttons .btn-accept:hover{-webkit-transform: scale(1.05); transform: scale(1.05);}
#cookies-alert .buttons .btn-decline{background-color: #243563; color: #fff; padding: 9px 18px; border: 2px solid #fff;}

/* Header */

header#mainHeader{padding: 30px 0; background-color: var(--main-color);}
header#mainHeader .content{align-items: center; display: grid; grid-template-areas: "logo nav phone"; grid-template-columns: repeat(2, max-content) 1fr; gap: 50px;}
header#mainHeader .content > .column{text-transform: uppercase; color: var(--dark-accent-color); align-items: center; gap: 5px 10px; margin-left: auto;}
header#mainHeader .content > .column strong{font-size: 2rem;}
header#mainHeader .content > .column a.row{align-items: center; border-radius: 25px; color: #ffffff; gap: 0;}
header#mainHeader .content > .column a.row.variation01{padding: 10px 20px; border: 2px solid; background: var(--dark-accent-color); gap: 5px;}
header#mainHeader .content > .column a.row span{font-size: 3rem; font-weight: 900; font-family: 'Akrobat';}
header#mainHeader .content > .column a.row.variation02 i{font-size: 45px; padding: 10px; background-color: var(--dark-accent-color); border-radius: 50%; border: 10px solid var(--main-color); margin-right: -20px; position: relative;}
header#mainHeader .content > .column a.row.variation02 span{padding: 5px 20px 5px 30px; background: var(--dark-accent-color); border-radius: 0 100vw 100vw 0;}
header#mainHeader .content nav{gap: 20px; text-transform: uppercase; color: var(--dark-accent-color); font-weight: bold;}
header#mainHeader img.logo{width: 250px;}
header#mainHeader .content .title-loja h1 {display: block;font-weight: 600;font-size: 1rem;color: var(--dark-accent-color);text-align: center;padding-top: 5px;}
header#mainHeader .content .title-loja h1 span {color: var(--dark-accent-color);font-size: 0.75em;}

@keyframes animate{
	0%{
		opacity: 0.2;
	}
	50%{
		opacity: 0.9;
	}
	100%{
		opacity: 0.2;
	}
}

/* Article Product */

article.product{align-items: center; gap: 0;}

article.product .imageSide{grid-area: imageSide;}
article.product .imageSide > .grid{height: 100%; background-color: #fff; /*overflow: hidden;*/ border-radius: 20px 0 0 0;}
article.product .imageSide .labels .timer{align-items: center;}
article.product .imageSide .labels .timer span{text-align: center;}
article.product .imageSide .rating{place-self: start; gap: 5px; margin: 15px;}
article.product .infoSide{grid-area: infoSide;}
article.product .infoSide > .column{align-items: center; justify-content: center; color: #fff; gap: 15px 0; position: relative;}
article.product .infoSide > .column:before{content: ''; bottom: 0; position: absolute; background-image: inherit;}
article.product .infoSide h6{font-size: 1.875rem; text-transform: uppercase;}
article.product .infoSide .price{align-items: center;}
article.product .infoSide .price span{text-align: right; font-size: 0.875rem;}
article.product .infoSide .price h5{font-size: 4em; font-family: Akrobat; font-weight: 400; line-height: 1em;}
article.product .infoSide .button.call{background-color: #ae1804;padding: 10px 30px;}

.content.variation01 article.product{grid-template-columns: 5fr 6fr; grid-template-areas: "imageSide infoSide";}
.content.variation01 article.product .imageSide{height: 90%;}
.content.variation01 article.product .imageSide .labels{align-self: start; justify-self: end; width: 80px; margin: 15px;}
.content.variation01 article.product .infoSide > .column{padding: 50px 10px; background-image: linear-gradient(90deg, #006eb6, #1990cf);}

.content.variation02{gap: 5px;}
.content.variation02 article.product{grid-template-areas: "imageSide" "infoSide"; border-radius: 10px; width: 100%; border-radius: 12px; box-shadow: 0 0 10px -1px rgba(0 0 0 / 60%);}
.content.variation02 article.product .shadow:before{width: 100%;}
.content.variation02 article.product .imageSide > .grid{aspect-ratio: 1; background-image: linear-gradient(180deg, #ddd 80%, transparent 80%); grid-template-rows: 1fr; grid-template-columns: 1fr; border-radius: 12px 12px 0 0;}
.content.variation02 article.product .imageSide > .grid img{width: 100%; object-fit: contain;}
.content.variation02 article.product .imageSide .labels{align-items: center; justify-content: space-between; align-self: start; justify-self: end; padding: 0; gap: 20px; margin: 20px -20px;}
.content.variation02 article.product .imageSide .labels img{width: 80px;}
.content.variation02 article.product .imageSide .rating{display: none;}
.content.variation02 article.product .infoSide > .column{padding: 20px 30px; background-color: #fff;}
.content.variation02 article.product .infoSide h6{color: #1e1e1e; padding: 5px 20px; text-align: center; font-weight: 900;}
.content.variation02 article.product .infoSide .price span{color: #1e1e1e; text-transform: uppercase; font-size: 1.25rem; font-weight: 900;}
.content.variation02 article.product .infoSide .price h5{color: red; transition: all .3s ease;}
.content.variation02 wm-slider-row:not(.active--) article.product .infoSide .price h5{font-size: 1em;}
.content.variation02 wm-slider{--row-count: 3; position: relative;}
.content.variation02 wm-slider wm-slider-mat:before,
.content.variation02 wm-slider wm-slider-mat:after{content: ''; flex: 0 0 calc(100% / var(--row-count));}
.content.variation02 wm-slider wm-slider-row{padding: 0 2%; place-content: center; place-items: center;}
.content.variation02 wm-slider wm-slider-row > *{transition: all .3s ease;}
.content.variation02 wm-slider wm-slider-row.active-- > *{width: 100%;}
.content.variation02 wm-slider wm-slider-row:not(.active--) > *{width: 80%; opacity: .5;}
.content.variation02 wm-slider wm-slider-controls{position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 50%; z-index: 1; user-select: none; pointer-events: none;}
.content.variation02 wm-slider wm-slider-trigger{padding: 8px; border-radius: 50%; background-color: #1c1c1c; color: #fff; font-size: 30px; pointer-events: all;}
.content.variation02 .button.wpp svg{display: none;}

@keyframes pulsate{
	
	0%{scale: 1; rotate: 0deg;}
	20%{scale: 1.2; rotate: 2deg;}
	40%{scale: 1; rotate: 0deg;}
	60%{scale: 1.2; rotate: -2deg;}
	80%{scale: 1; rotate: 0deg;}
	100%{scale: 1; rotate: 0deg;}
	
}

@media(max-width: 900px){

	.variation02 article.product .infoSide h6{font-size: .75rem;}
	.variation02 article.product .infoSide .price h5{font-size: 2.2rem;}
	
	.variation02 article.product .imageSide .labels *:is(img, canvas){width: 50px;}
	.variation02 wm-slider{--row-count: 1.5; padding: 0 5vw;}
	.variation02 wm-slider wm-slider-mat:before,
	.variation02 wm-slider wm-slider-mat:after{flex: 0 0 calc((100% - (100%/var(--row-count)))/2);}
	.variation02 wm-slider wm-slider-controls{width: 100%;}
	.variation02 .button.wpp{font-size: 1rem;}
	
}

@media(min-width: 326px){

	.variation01 article.product .infoSide > .column:before{top: 0; width: 20px;}
	.variation01 article.product .imageSide > .grid > img{place-self: end; height: 80%; object-fit: cover;}

	.variation01 article.product:nth-child(2n){grid-template-columns: 6fr 5fr;}
	.variation01 article.product:nth-child(2n) .infoSide > .column:before{left: -20px; clip-path: polygon(100% calc(50% - 20px), 0% 50%, 100% calc(50% + 20px));}

	.variation01 article.product:nth-child(2n - 1){grid-template-areas: "infoSide imageSide";}
	.variation01 article.product:nth-child(2n - 1) .infoSide > .column:before{right: -20px; clip-path: polygon(0% calc(50% - 20px), 100% 50%, 0% calc(50% + 20px));}
	.variation01 article.product:nth-child(2n - 1) .infoSide > .column{background-image: linear-gradient(270deg, #006eb6, #1990cf);}
	.variation01 article.product:nth-child(2n - 1) .imageSide > .grid{border-radius: 0 20px 0 0;}
	.variation01 article.product:nth-child(2n - 1) .imageSide .labels{justify-self: start;}
	.variation01 article.product:nth-child(2n - 1) .imageSide .rating{justify-self: end;}

}

@media(max-width: 325px){

	article.product{grid-template-areas: "imageSide""infoSide"; grid-template-columns: 1fr;}
	article.product .imageSide{height: auto;}
	article.product .imageSide:before{display: none;}
	article.product .imageSide .grid{border-radius: 0;}
	article.product .imageSide .grid img{justify-self: center; max-height: 200px;}
	article.product .infoSide > .column{padding: 20px 10px;}
	article.product .infoSide > .column:before{right: 0; left: 0; top: -20px; bottom: 20px; clip-path: polygon(calc(50% - 20px) 20px, 50% 0%, calc(50% + 20px) 20px);}

}

/* Product List */

section#productList,
section#mechProductList{padding: 50px 0;}

section#mechProductList h3{padding: 8px; background-color: var(--dark-accent-color); color: #fff; font-size: 1rem; text-transform: uppercase; text-align: center; margin-bottom: 50px; align-items: center; justify-content: center; gap: 10px;}
section#mechProductList h3 span{font-size: 50px;}

/* Products Article */

section#products{padding: 50px 0;}
section#products .content{flex-wrap: wrap; gap: 50px;}

section#products wm-slider{--row-count: 2;}

section#products article{color: #fff; text-transform: uppercase; font-weight: 900; gap: 0px; flex: 0 0 calc(25% - 50px*3/4);}
section#products article .body{gap: 10px; align-items: center; background-image: linear-gradient(180deg, transparent 30%, #393b43 70%, #000000); padding: 0 20px;}
section#products article header{position: relative;}
section#products article header .column{position: absolute; top: 9.6%; right: -18%; left: 80%; bottom: 32.4%; justify-content: space-between;}
section#products article h2{font-size: 2.25rem; background-image: linear-gradient(45deg, #393b43, #000000); padding: 10px 0; text-align: center; font-family: 'Akrobat'; border-bottom-left-radius: 25px;}
section#products article strong{font-size: 8rem; font-family: Akrobat; color: #ffffff;}
section#products article strong:after{content: ',00'; font-size: 1.7rem;}
section#products article a.qlwapp-toggle{background-color: #46c036; padding: 10px 0; text-align: center; font-size: 1.25rem; position: relative; margin-top: 10px}
section#products article a.qlwapp-toggle:before,
section#products article a.qlwapp-toggle:after{content: ''; position: absolute; top: 0; left: 6%; width: 44%; height: 90%; background-color: rgba(0 0 0 / 30%); filter: blur(5px); transform-origin: top right; transform: skewY(-7deg); z-index: -1;}
section#products article a.qlwapp-toggle:after{transform-origin: top left; left: 50%; transform: skewY(7deg);}


section#products article a.ligar{background-color: #2D2F36; padding: 10px 0; text-align: center; font-size: 1.25rem; position: relative; margin-top: 10px}
section#products article a.ligar:before,
section#products article a.ligar:after{content: ''; position: absolute; top: 0; left: 6%; width: 44%; height: 90%; background-color: rgba(0 0 0 / 30%); filter: blur(5px); transform-origin: top right; transform: skewY(-7deg); z-index: -1;}
section#products article a.ligar:after{transform-origin: top left; left: 50%; transform: skewY(7deg);}

section#products dialog{/*top: 50%; left: 50%; transform: translate(-50%, -50%); width: 720px; max-width: 90vw; align-items: center; border: 0; border-radius: 20px; box-shadow: 0 3px 5px -1px rgba(0 0 0 / 40%);*/ gap: 0;}
section#products dialog::backdrop{background-color: rgba(0 0 0 / 30%); cursor: pointer;}
section#products dialog a.close{position: absolute; top: 14px; right: 14px; cursor: pointer;}
section#products dialog article{padding: 40px 0;}
section#products dialog article header .column{width: 85px;}
section#products dialog article header .column img{aspect-ratio: 1; border-radius: 50%; border: 2px solid #000;}
section#products dialog article header > img{width: 225px; height: 225px;}
section#products dialog article header h5{background: transparent; color: #1F3D8B;}
section#products dialog article > .column{color: #1F3D8B;}
section#products dialog article > .column p:last-child{height: 6.8rem;}
section#products dialog article > .column p:last-child strong{color: #1F3D8B; line-height: 1em;}
section#products dialog a.qlwapp-toggle{background-color: #46C036; border-radius: 20px; justify-content: center; color: #fff; padding: 12px 0; font-weight: 900; text-transform: uppercase; font-size: 1.25rem; align-items: center; gap: 12px;}

@media(min-width: 516px){

	section#products wm-slider{--row-count: 8; overflow: visible; pointer-events: none;}
	section#products wm-slider wm-slider-mat{flex-wrap: wrap; gap: 50px; cursor: initial;}
	section#products wm-slider wm-slider-row{flex: 0 0 calc(25% - 50px*3/4);}
	section#products article a.qlwapp-toggle{pointer-events: initial;}
	section#products article a.ligar{pointer-events: initial;}

}

/* Brands */

section#brands{padding: 20px 0; gap: 10px; text-align: center;}
section#brands .carousel{overflow: hidden;}
section#brands .carousel .image{align-items: center; gap: 10px; grid-auto-flow: column; grid-auto-columns: 1fr; width: 200%; aspect-ratio: 1869/30; animation: carousel 25s linear infinite; position: relative; padding-left: 10px;}

@keyframes carousel{
	
	0%{left: 0%;}
	100%{left: -100%;}
	
}

@media(max-width: 500px){
		
	section#brands h3{font-size: 1.5rem;}
	section#brands .carousel .image{width: 600%;}

	@keyframes carousel{

		0%{left: 0%;}
		100%{left: -300%;}

	}
	
}

/* UX */

section#ux{background-color: var(--main-color); padding: 40px 0 50px; position: relative;}
section#ux:after{content: ''; position: absolute; bottom: 0; right: 0; width: 45%; height: 15px; background-image: linear-gradient(45deg, #23c0e3, #3370b7);}
section#ux .content{gap: 50px;}
section#ux h3 {display: flex; align-items: center; gap: 1em; justify-content: center;}
section#ux h3 img { width: 300px; filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff); user-select: none;}
section#ux wm-slider{--row-count: 3.3; position: relative;}
section#ux wm-slider wm-slider-mat{margin: 0 20px;}
section#ux wm-slider wm-slider-row{padding: 0 15px;}
section#ux wm-slider wm-slider-controls{position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; right: 0; pointer-events: none;}
section#ux wm-slider wm-slider-trigger{height: 100%; display: flex; align-items: center; justify-content: center; width: 30px; background-color: var(--main-color); color: var(--dark-accent-color); user-select: none; pointer-events: all;}

section#ux header{gap: 10px;}

section#ux article{padding: 10px 15px; background-color: #e9e9e9; border-radius: 10px; border: 2px solid #fff; display: grid; grid-template-areas: "img name" "img rating" "text text"; grid-template-columns: auto; gap: 5px 20px; width: clamp(0px, 370px, 100%); margin: auto;}
section#ux article img{grid-area: img;}
section#ux article h5{grid-area: name; font-size: 1.125rem;}
section#ux article p{grid-area: text; padding-top: 10px; border-top: 1px solid;}
section#ux article .rating{grid-area: rating; color: #efcb2e;}

/* Specialized */

section#specialized{padding: 40px 0 60px; background-image: linear-gradient(80deg, #3370b7, #054fa3); position: relative;}
section#specialized:after{content: ''; position: absolute; bottom: 0; left: 0; width: 85%; height: 15px; background-image: linear-gradient(45deg, #23c0e3, #3370b7);}
section#specialized .content{gap: 20px;}
section#specialized .content > p{color: #fff; font-size: 1.25rem;}
section#specialized .row{align-items: stretch;}
section#specialized header{gap: 0;}
section#specialized header h3{color: var(--main-color);}
section#specialized header h4{color: #fff;}
section#specialized article{border-radius: 25px; overflow: hidden; gap: 0;}
section#specialized article h5{background-color: var(--main-color); color: var(--dark-accent-color); text-transform: uppercase; font-weight: 900; font-size: 1.25rem; text-align: center; padding: 5px 0;}
section#specialized article img{height: 220px; object-fit: cover;}
section#specialized article p{padding: 20px 25px; background-color: #fff; line-height: 1.5em; color: #393939; flex: 1 1 auto; display: flex; align-items: center;}

section#specialized img.flare{margin: 50px 0;}

	/* Services */

section#services header h3{color: #fff;}
section#services header h4{color: var(--main-color);}
section#services .content{gap: 50px;}
section#services .grid{display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; color: #fff; font-size: 1.125rem; gap: 15px;}
section#services .grid p.row{gap: 5px; align-items: center;}

/* Closest */

section#closest{padding: 50px 0; background-image: linear-gradient(240deg, #31343b, #000000);}
section#closest .content{gap: 50px;}
section#closest h3{color: var(--bg-color);}
section#closest h3 span{color: var(--dark-accent-color);}
section#closest a{cursor: pointer;}

section#closest dialog#locationsModalTemplate[open]{width: 450px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; padding: 45px 30px 30px; background-color: var(--main-color); display: flex; flex-direction: column; gap: 30px; text-align: center; max-width: 70vw; max-height: 80vh; overflow: auto; color: var(--dark-accent-color);}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]{position: absolute; width: 30px; height: 30px; top: 20px; right: 10px;}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:before,
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:after{content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 2px; height: 2px; background-color: var(--dark-accent-color); transform: rotate(45deg); z-index: 10;}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:after{transform: rotate(-45deg);}
section#closest dialog#locationsModalTemplate::backdrop{background-color: rgba(0 0 0 / 70%); cursor: pointer;}
section#closest dialog#locationsModalTemplate h5{font-size: 1.5rem; text-transform: uppercase;}
section#closest dialog#locationsModalTemplate a{font-size: 1.125rem; text-align: left; gap: 5px; align-items: initial;}
section#closest dialog#locationsModalTemplate a img{width: 300px; aspect-ratio: 4/2; background-color: #ddd; border-radius: 5px;}
section#closest dialog#locationsModalTemplate a span{background-color: var(--dark-accent-color); color: #fff; font-weight: 700; padding: 10px 30px; border-radius: 5px; text-transform: uppercase; text-align: center;}

/* Vagas */

section#vagas-form{padding: 50px 0;}
section#vagas-form form{gap: 20px;}
section#vagas-form form .grid{grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;}
section#vagas-form form .grid .inputLabel{gap: 0; align-items: flex-start;}
section#vagas-form form .btn{ width: 50%; margin: 0 auto;background-color: var(--dark-accent-color); color: #fff;}

/* Footer */

footer#mainFooter{padding: 40px 0 20px; display: grid; grid-template-columns: 1fr 2fr; align-items: center;}
footer#mainFooter p{justify-self: center;}
footer#mainFooter .row{padding: 10px 0; background-color: var(--main-color); color: var(--dark-accent-color); font-weight: 700; justify-content: center; gap: 40px; align-items: center;}


/* Floating Menu */

section#floatingMenu{position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; --bg-color: var(--main-color); padding: 10px; display: grid; grid-template-columns: repeat(3, 100px); gap: 5px; align-items: center; justify-content: center; font-weight: 900; color: #ffffff; text-align: center; font-size: .8rem; background-color: #2A2C32;}
section#floatingMenu a i{width: 30px; height: 30px; display: flex; place-self: center;}
section#floatingMenu .especialista{grid-column: 1 / span 3;}
section#floatingMenu .especialista h5{font-size: 1rem;}
section#floatingMenu .especialista a.button{font-size: 1rem; color: #fff;}
section#floatingMenu .especialista a:before{display: none;}

/* Product Info Dialog */

body:has(dialog.productInfo[open]){overflow: hidden;}
dialog.productInfo{top: 50%; left: 50%; translate: -50% -50%; gap: 50px; width: 500px; overflow: visible; background: transparent; border: 0;}
dialog.productInfo::backdrop{background-color: rgba(0 0 0 / 60%);}
dialog.productInfo .column{align-items: center; gap: 0;}
dialog.productInfo .column > img{width: 80%;}
dialog.productInfo .column .info{width: 115%; padding: 30px; align-items: center; background-color: #d5d5d5; border-radius: 20px; gap: 10px;}
dialog.productInfo .column .info p:first-child{font-size: .875rem; color: rgba(0 0 0 / 40%);}
dialog.productInfo .column .info .grid{grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 20px; flex-wrap: wrap; text-align: center; font-size: 0.75rem; justify-content: center;}
dialog.productInfo .column .info .grid span{font-size: 42px;}
dialog.productInfo .column .info .grid .column{align-items: center; gap: 5px;}
dialog.productInfo .column > p:last-child{width: 80%; padding: 10px 20px; background-color: #fff;}
dialog.productInfo a{color: #fff; width: 80%; margin: auto; text-align: center;}

/* Responsive */

@media(min-width: 516px){

	.mobile{display: none !important;}

}

@media(max-width: 515px){

	.desktop{display: none !important;}

	.timer span{font-size: 0.7rem;}

	#cookies-alert{padding: 10px; flex-direction: column; gap: 10px;}

	h3{font-size: 1.9rem;}
	h4{font-size: 1.3rem;}

	article.product .infoSide h6{font-size: 1.25rem;}
	article.product .infoSide .button{font-size: 1rem; padding: 10px 20px;}
	article.product .infoSide .button.wpp svg{flex: 0 0 20px;}
	article.product .imageSide .labels{width: 50px;}
	article.product .imageSide .rating{gap: 0px;}
	article.product .imageSide .rating svg{width: 15px;}
	article.product .imageSide > .grid > img{max-height: 300px;}

	dialog.productInfo{width: 90vw;}
	dialog.productInfo .column .info .grid{font-size: .5rem;}
	
	header#mainHeader{padding: 5px 0;}
	header#mainHeader .content{grid-template-areas: "logo phone""nav nav"; grid-template-columns: 1fr 1.2fr; gap: 20px;}
	header#mainHeader img.logo{grid-area: logo; width: 100%; margin: auto;}
	header#mainHeader .content nav{grid-area: nav; font-size: 0.7rem; gap: 10px; justify-content: center;}
	header#mainHeader .content > .column{grid-area: phone; margin-left: initial; gap: 0;}
	header#mainHeader .content > .column strong{font-size: 0.7rem;}
	header#mainHeader .content > .column a.row.variation01{padding: 10px;}
	header#mainHeader .content > .column a.row.variation01 i{width: 20px;}
	header#mainHeader .content > .column a.row.variation02 i{font-size: 20px; padding: 5px; border-width: 5px;}
	header#mainHeader .content > .column a.row span{font-size: 1.3rem;}

	section#productList{padding: 20px 0;}
	section#productList .content{grid-template-columns: minmax(0, 1fr);}
	
	section#products .content{gap: 40px 17px;}
	section#products article{flex: 0 0 calc(50% - 10px);}
	section#products article header h5{font-size: 1.25rem;}
	section#products article strong{font-size: 4rem;}
	section#products article > .column{border-bottom-right-radius: 60px; padding: 0 10px;}
	section#products article a{font-size: 0.7rem !important;}

	section#ux header h3{font-size: 1.4rem;}
	section#ux header h3 img{width: 180px;}
	section#ux header h4{font-size: 0.7rem;}
	section#ux{padding: 20px 0 30px;}
	section#ux .content{gap: 30px;}
	section#ux wm-slider {--row-count: 1.3;}

	section#specialized header{gap: 0; text-align: center;}
	section#specialized .content{text-align: center;}
	section#specialized .content > p{font-size: 1rem;}
	section#specialized > .content > .row{flex-direction: column;}

	section#services header h4 strong{display: block;}
	section#services .grid{grid-auto-flow: row; gap: 10px;}

	section#closest h3{text-align: center;}

	footer#mainFooter{font-size: .5rem; padding: 0px}

}

@media(max-width: 370px){
    header#mainHeader .content > .column a.row span{
		font-size: 1.1rem;
	}
}

@media(max-width: 355px){
	section#products .content{gap: 50px 15px;}
	section#ux header h3 {
		font-size: 1.1rem;
	}
}

.click_whats {
	cursor: pointer;
}

.hide-cookies-alert {
	display: none !important;
}
.trigger {
	display: block;
	width: 100%;
	padding: 15px;
	background: #333;
	font-size: 0.9em;
	color: #fff;
	margin-bottom: 20px;
}

.trigger p {
	margin-top: 8px;
}

.trigger_success {
	background-color: #00B494;
}

.trigger_info {
	background-color: #0E96E5;
}

.trigger_alert {
	background-color: #FAAD50;
}

.trigger_error {
	background-color: #F45563;
}

.trigger_none {
	margin-bottom: 0;
}

.form_load {
	display: none;
	vertical-align: middle;
	margin: auto;
	width: 50px;
}

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

embed,
video,
iframe,
iframe[style]{
	max-width: 100%;
	height: auto;
}

select{
	border: 1px solid #ccc;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	background-image: url(../../admin/_img/select.png);
	background-size: auto 70%;
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
	font-size: 1em;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0; overflow: hidden;
	max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

img{
	max-width: 100%;
	vertical-align: middle;
	margin: 0;
}

a img {
	border: none;
	margin: 0;
}

ul{
	list-style: none;
}

fieldset{border: 0;}
input,
select,
textarea{padding: 10px; width: 100%;}
input.btn{width: auto; cursor: pointer;}

.container{
	display: block;
	width: 100%;
}

/*.content{
    display: block;
    margin: 0 auto;
}*/

.clear{
	clear: both;
}

.fl_right{
	float: right;
}

.fl_left{
	float: left;
}

.progress{
	display: block;
	width: 100%;
	background: #333;
}

.progress_bar{
	display: inline-block;
	background: #00B494;
	color: #fff;
	padding: 5px;
	font-size: 0.7em;
	text-align: center;
	max-width: 100%;
	font-weight: 600;
	text-shadow: 1px 1px 0 #333;
	text-transform: uppercase;
}

.radius{
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.rounded{
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.label_50 label{
	display: inline-block;
	width: 48%;
}

.label_50 label:nth-child(2n+0){
	margin-left: 3%;
}

/***********************************
######## HTML CHARS CONFIG #########
***********************************/
.htmlchars{
	display: block;
	width: 100%;
	padding: 30px;
}

.htmlchars h3{display: block; font-size: 2em; font-weight: 300; margin-bottom: 30px}
.htmlchars h4{display: block; font-size: 1.8em; font-weight: 300; margin-bottom: 30px}
.htmlchars h5{display: block; font-size: 1.6em; font-weight: 300; margin-bottom: 30px}
.htmlchars p{margin-bottom: 20px; font-size: 0.9em; font-weight: 400;}
.htmlchars iframe{width: 100%; border: none;}
.htmlchars ul{list-style: circle; margin: 20px 30px;}
.htmlchars ol{margin: 20px 30px;}
.htmlchars form{padding: 30px; background: #fbfbfb; margin: 20px 0; text-align: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.htmlchars form label{display: block; margin-bottom: 15px; font-size: 0.9em; text-transform: uppercase;}
.htmlchars form input,
.htmlchars form textarea{border: 1px solid #ccc; display: block; margin-top: 15px; font-size: 1em; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.htmlchars form button,
.htmlchars form input[type="submit"]{display: block; border: 0; color: #fff; text-shadow: 0 1px #000; cursor: pointer; padding: 15px 30px; font-size: 1.2em; font-weight: bold; text-transform: uppercase; background: #00B494; border-bottom: 5px solid #008068; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.htmlchars form button:hover,
.htmlchars form input[type="submit"]:hover{background-color: #008068; border-color: #0B5747;}
.htmlchars a{color: #0E96E5; text-decoration: none;}
.htmlchars a:hover{text-decoration: underline;}
.htmlchars pre{margin-bottom: 30px; font-size: 0.8em;}
.htmlchars .btn{display: block; color: #fff;}
.htmlchars .btn:hover{text-decoration: none !Important;}


/*
TRIGGER
Personaliza mensagens do sistema
*/
.trigger{
	display: block;
	width: 100%;
	padding: 15px;
	background: #333;
	font-size: 0.9em;
	color: #fff;
	margin-bottom: 20px;
}

.trigger p{
	margin-top: 8px;
}

.trigger_success{background-color: #00B494;}
.trigger_info{background-color: #0E96E5;}
.trigger_alert{background-color: #FAAD50;}
.trigger_error{background-color: #F45563;}

.trigger_none{
	margin-bottom: 0;
}

.paginator{
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

.paginator li{
	display: inline-block;
}

.paginator li span,
.paginator li a{
	font-size: 0.8em;
	display: inline-block;
	padding: 6px 12px;
	background: #006699;
	margin: 0 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-decoration: none;
	color: #fff;
	font-weight: 600;
	text-shadow: 1px 1px #006699;
}

.paginator li a:hover{
	background: #0E96E5;
}

.paginator li span{
	background: #888;
	text-shadow: 1px 1px #333;
}

/*DISPLAY MODE*/
.ds_none{display: none;}
.ds_block{display: block;}
.ds_inline{display: inline;}
.ds_inblock{display: inline-block;}

/*MARGIN MODE*/

.m_top{margin-top: 20px;}
.m_bottom{margin-bottom: 20px;}
.m_left{margin-left: 20px;}
.m_right{margin-right: 20px;}


/*ALIGN*/

.al_center{text-align: center;}
.al_left{text-align: left;}
.al_right{text-align: right;}
.al_justify{text-align: justify;}


/*TOOLTIP*/
.wc_tooltip{
	display: inline-block;
	vertical-align: top;
	position: relative;
}

.wc_tooltip:hover .wc_tooltip_balloon{
	display: inline;
}

.wc_tooltip_balloon{
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	bottom: 100%;
	margin-bottom: 10px;
	font-weight: 500;
	width: 200px;
	padding: 15px;
	background: #000;
	opacity: 0.9;
	z-index: 99;
	color: #fff;
	font-size: 0.75rem;
	text-align: center;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-shadow: none !important;
}

.wc_tooltip_balloon::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

/***********************************
######### CUSTON BUTTONS ###########
***********************************/
.btn{
	display: inline-block;
	cursor: pointer;
	padding: 7px 12px;
	margin-top: 2px;
	background: #888;
	font-size: 0.9em;
	color: #fff !important;
	text-decoration: none !important;
	text-align: center;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-shadow: 1px 1px #555;
}

.btn_medium{
	padding: 10px 20px;
	font-size: 1.1em;
	text-transform: uppercase;
	font-weight: bold;
}

.btn:hover{
	background: #555;
	text-decoration: none !important;
}

.btn_blue{
	background-color: #0E96E5;
	text-shadow: 1px 1px #096397;
}
.btn_blue:hover{background-color: #096397;}

.btn_green{
	background-color: #00B494;
	text-shadow: 1px 1px #008068;
}
.btn_green:hover{background-color: #008068;}

.btn_yellow{
	background-color: #FAAD50;
	text-shadow: 1px 1px #CC8D41;
}
.btn_yellow:hover{background-color: #CC8D41;}

.btn_red{
	background-color: #F45563;
	text-shadow: 1px 1px #C54550;
}
.btn_red:hover{background-color: #C54550;}

.btn_cta_blue{
	padding: 11px 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #0E96E5;
	border-bottom: 5px solid #096397;
}

.btn_cta_blue:hover{
	background-color: #096397;
	border-color: #0A537D;
}

.btn_cta_green{
	padding: 11px 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #00B494;
	border-bottom: 5px solid #008068;
}

.btn_cta_green:hover{
	background-color: #008068;
	border-color: #0B5747;
}

.btn_cta_yellow{
	padding: 11px 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #FAAD50;
	border-bottom: 5px solid #CC8D41;
}

.btn_cta_yellow:hover{
	background-color: #CC8D41;
	border-color: #A67436;
}

.btn_cta_red{
	padding: 11px 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	background: #F45563;
	border-bottom: 5px solid #C54550;
}

.btn_cta_red:hover{
	background-color: #C54550;
	border-color: #93343C;
}

.btn_green_noaction:hover{background: #00B494 !important; cursor: default !important;}
.btn_blue_noaction:hover{background: #0E96E5 !important; cursor: default !important;}
.btn_yellow_noaction:hover{background: #FAAD50 !important; cursor: default !important;}
.btn_red_noaction:hover{background: #F45563 !important; cursor: default !important;}

/***********************************
############### BARS  ##############
***********************************/
.bar_green{display: inline-block; vertical-align: middle; padding: 4px 10px 5px 10px; background: #00B494; font-size: 0.8em; color: #fff;}
.bar_blue{display: inline-block; vertical-align: middle; padding: 4px 10px 5px 10px; background: #0E96E5; font-size: 0.8em; color: #fff;}
.bar_red{display: inline-block; vertical-align: middle; padding: 4px 10px 5px 10px; background: #F45563; font-size: 0.8em; color: #fff;}
.bar_yellow{display: inline-block; vertical-align: middle; padding: 4px 10px 5px 10px; background: #FAAD50; font-size: 0.8em; color: #fff;}
.bar_icon:before{ display: inline-block; margin-right: 4px !important;}

/***********************************
########## FONT COLOR  #############
***********************************/
.font_black{color: black !important;}
.font_white{color: white !important;}
.font_yellow{color: #FAAD50 !important;}
.font_green{color: #00B494 !important;}
.font_blue{color: #0E96E5 !important;}
.font_red{color: #C54550 !important;}
.font_purple{color: #B78FD3 !important;}
.font_vintage{color: #7EB1BC !important;}

/***********************************
########## BACK COLOR  #############
***********************************/
.bg_yellow{background-color: #FAAD50 !important;}
.bg_green{background-color: #00B494 !important;}
.bg_blue{background-color: #0E96E5 !important;}
.bg_red{background-color: #C54550 !important;}
.bg_purple{background-color: #b78fd3 !important;}
.bg_vintage{background-color: #7eb1bc !important;}


/***********************************
############ BOX MODEL #############
***********************************/
.box{
	display: inline-block;
	width: 100%;
	vertical-align: top;
}

.box:before{
	clear: both;
}

.box1{width: 100%; margin: 15px 0 15px 0;}
.box2{width: 49%; margin: 1% 2% 1% 0;}
.box2:nth-of-type(2n+0){margin-right: 0;}
.box3{width: 32%; margin: 1% 2% 1% 0;}
.box3:nth-of-type(3n+0){margin-right: 0;}
.box4{width: 23.5%; margin: 1% 2% 1% 0;}
.box4:nth-of-type(4n+0){margin-right: 0;}
.box5{width: 18.4%; margin: 1% 2% 1% 0;}
.box5:nth-of-type(5n+0){margin-right: 0;}
.box_side{width: 70%; padding-right: 40px;}
.box_bar{width: 30%;}


/***********************************
############# OPTIN`S ##############
***********************************/
.calltoaction {
	background-color: #4CAF50;
	border: none;
	color: white !important;
	padding: 20px;
	width: 100%;
	text-align: center;
	text-decoration: none !important;
	display: inline-block;
	font-size: 1.4em;
	font-weight: bold;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-shadow: 1px 1px 0 #000;
	-webkit-transition-duration: 0.2s; /* Safari */
	transition-duration: 0.2s;
	cursor: pointer;
	box-shadow: 1px 1px 3px 1px #ccc;
	-moz-box-shadow: 1px 1px 3px 1px #ccc;
	-webkit-box-shadow: 1px 1px 3px 1px #ccc;
}

.calltoaction:hover {
	background-color: #55C25C; /* Green */
	color: white;
}

#optin {
	width: 100%;
	text-align: center;
}

#optin *{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#optin input {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#optin input[type="text"],
#optin input[type="email"] {
	border: 1px solid #ccc;
	font-size: 15px;
	margin-bottom: 15px;
	padding: 8px 10px;
	width: 100%
}

#optin input.email {
	background: #fff url(images/email.png) no-repeat center right;
}

#optin input.name {
	background: #fff url(images/name.png) no-repeat center right;
}

#optin input[type="submit"] {
	display: block;
	width: 100%;
	padding: 15px;
	background: #56b748;
	border: 1px #4a9e3e solid;
	color: #fff;
	text-shadow: 1px 1px 0 #333;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

#optin input[type="submit"]:hover {
	background: #4a9e3e; border-color: #3e8434;
}

#optin .termos{
	font-size: 0.8em;
	margin: 10px 0 0 0;
	display: inline-block;
	padding-left: 25px;
	background: url(images/privace.png) left center no-repeat;
	text-transform: uppercase;
	color: #555;
}


/***********************************
############# MAINTENANCE ##############
***********************************/

.workcontrol_maintenance{
	padding: 20px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	background: #ba8585;
	color: #fff;
	text-shadow: 1px 1px 0px #855E5E;
}

/***********************************
########## MEDIA QUERIES ###########
***********************************/

@media (max-width: 34em){
	.box2,
	.box3,
	.box4,
	.box5{width: 100%; margin: 15px 0 15px 0 !important;}

	.label_50 label{display: block; width: 100%;}
	.label_50 label:nth-child(2n+0){margin-left: 0;}

	.wc_ead_enter_actions,
	.form_actions{text-align: center !important;}
}

@media (min-width: 34em) and (max-width: 48em){
	.box2,
	.box3,
	.box4,
	.box5{width: 49%; margin: 1% 2% 1% 0 !important;}
	.box2:nth-of-type(2n+0),
	.box3:nth-of-type(2n+0),
	.box4:nth-of-type(2n+0),
	.box5:nth-of-type(2n+0){margin-right: 0 !important;}
}

@media (min-width: 48em) and (max-width: 64em){
	.box3,
	.box4,
	.box5{width: 32%; margin: 1% 2% 1% 0 !important;}
	.box3:nth-of-type(3n+0),
	.box4:nth-of-type(3n+0),
	.box5:nth-of-type(3n+0){margin-right: 0 !important;}
}

@media(max-width: 60em){
	.box_bar,
	.box_side{width: 100%; padding: 0;}
}

@media (min-width: 64em) and (max-width: 80em){
	.box4,
	.box5{width: 23.5%; margin: 1% 2% 1% 0 !important;}
	.box4:nth-of-type(4n+0),
	.box5:nth-of-type(4n+0){margin-right: 0 !important;}
}