/* ---- isdesign.com.br ---- */

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, button, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, button, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section { display:block; }

html, body 	{ width:100%; height:100%; }
a, button 	{ color:rgba(0,0,0,.87); text-decoration:none; cursor:pointer; }
body 		{ font-family:sans-serif; line-height:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
img 		{ vertical-align:bottom; }
ol, ul 		{ list-style:none; }
table 		{ border-collapse:collapse; border-spacing:0; }

blockquote:before, blockquote:after, q:before, q:after { content:""; content:none; }
blockquote, q { quotes:none; }

/* ---- Reset ---- */

body {
	min-width:320px; color:rgba(0,0,0,.54); font-family:"Roboto Slab", "Helvetica Neue", Arial;
	font-size:100%; line-height:100%; word-wrap:break-word; background:#480030 url(../img/fundo.png) center repeat;
}


button, input, select, textarea {
	display:block; color:rgba(0,0,0,.54); font-family:"Roboto Slab", "Helvetica Neue", Arial; font-size:100%; line-height:100%;
	text-align:left; background:none; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
textarea { resize:none; }
[type=checkbox] { -webkit-appearance:checkbox; -moz-appearance:checkbox; appearance:checkbox; }
[type=radio] { -webkit-appearance:radio; -moz-appearance:radio; appearance:radio; }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button,
[type=date]::-webkit-inner-spin-button, [type=date]::-webkit-calendar-picker-indicator { margin:0; -webkit-appearance:none; }

input:-webkit-autofill {
	color:rgba(0,0,0,.54) !important; -webkit-text-fill-color:rgba(0,0,0,.54) !important;
	background-color:none !important; transition:none; box-shadow:inset 0 0 0 10rem #ffffff;
}

li		  { margin:.5rem 0 0 2rem; }
ul		  { list-style:disc; }
ol		  { list-style:decimal; }
em, i	  { font-style:italic; }
strong, b { font-weight:bold; }
u		  { text-decoration:underline; }



@font-face {
	font-family:"Material Icons"; font-style:normal; font-weight:400;
	src:url(../fonts/MaterialIcons-Regular.eot);
	src:local("Material Icons"), local("MaterialIcons-Regular"),
		url(../fonts/MaterialIcons-Regular.woff2)	format("woff2"),
		url(../fonts/MaterialIcons-Regular.woff)	format("woff"),
		url(../fonts/MaterialIcons-Regular.ttf)		format("truetype");
}
.material-icon, .material-icon-before::before, .material-icon-after::after {
	width:1.5rem; height:1.5rem; display:inline-block; overflow:hidden;
	direction:ltr; font-family:"Material Icons"; font-size:1.5rem; font-style:normal; font-weight:normal;
	letter-spacing:normal; line-height:1; text-transform:none; white-space:nowrap; word-wrap:normal;
	-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
	font-feature-settings:"liga"; text-rendering:optimizeLegibility;
}



/* ---- Topo ---- */



.header { padding:1.5rem 0; text-align:center; }
.header-logo { height:18px; display:block; position:absolute; top:1.9375rem; left:50%; transform:translateX(-50%); }
.header-button { width:1.5rem; height:1.5rem; margin:.25rem 0; position:relative; }
.header-button-e { float:left; }
.header-button-d { float:right; }
.header-button-texto { display:none; }
.header-button::before { color:rgba(255,255,255,.5); transition:color .25s; }
.header-button-e::before { content:"\e8b6"; }
.header-button-d::before { content:"\e899"; }
.header-button:hover::before { color:rgba(255,255,255,1); }

.header-menu { border: 1px solid #fff; background: #480030; box-shadow: 0 4px 24px 0 rgba(0,0,0,.16); }
.header-menu-button { width:100%; padding:.75rem 0; text-align:center; }
.header-menu-button-texto { padding-left:2.375rem; display:inline-block; position:relative; font-size:.875rem; font-weight:bold; line-height:1.5rem; text-transform:uppercase; }
.header-menu-button-texto::before { position:absolute; top:calc(50% - .75rem); left:0; content:"\e5d2"; }
.header-menu-button-ativo .header-menu-button-texto::before { content:"\e5cd"; }
.header-menu-nav { padding:1rem 0; border-top:1px solid #212121; display:none; }
.header-menu-nav-a { padding:.5rem 0; display:block; font-size:.875rem; line-height:1.25rem; text-align:center; text-transform:uppercase; }
.header-menu-nav-ativo { display:block; animation:modal-ativo .4s; }

@media all and (min-width:720px) {
	.header-button { width:auto; padding-left:2.375rem; font-size:.875rem; line-height:1.5rem; }
	.header-button::before { position:absolute; top:calc(50% - .75rem); left:0; }
	.header-button-texto { display:block; color:rgba(255,255,255,.7); transition:color .25s; }
	.header-button:hover .header-button-texto { color:rgba(255,255,255,1); }
	
	.header-menu-button { display:none; }
	.header-menu-nav { padding:0; border-top:0; display:block; text-align:center; }
	.header-menu-nav-a { padding:.875rem 12px; display:inline-block; }
}
@media all and (min-width:800px) {
	.header { padding:2rem 0; }
	.header-logo { height:34px; top:2.9375rem; }
	.header-button { margin:1.25rem 0; }
	
	.header-menu-nav-a { padding:.875rem 16px; }
}
@media all and (min-width:960px) {
	.header { padding:0; }
	.header-logo { height:46px; top:2.9375rem; transition:opacity .25s; }
	.header-logo:hover { opacity:.8; }
	.header-button { margin:3.625rem 0; }
	
	.header-menu-nav-a { padding:.875rem 24px; transition:background .25s; }
	.header-menu-nav-a:hover { background:rgba(0,0,0,.12); }
}
@media all and (min-width:1120px) { .header-menu-nav-a { padding:.875rem 32px; } }

.login { width:100%; height:100%; display:none; position:fixed; top:0; left:0; z-index:100; overflow:auto; background:rgba(0,0,0,.54); }
.login-wrap { width:320px; padding:1.5rem 24px; border:solid #ffffff; border-width:0 1px 1px; position:absolute; top:0; right:0; opacity:0; background:#212121; box-shadow:-2px 2px 8px 2px rgba(0,0,0,.24); }
.login-ativo, .login-inativo { display:block; }
.login-ativo .login-wrap { opacity:1; animation:login-ativo .4s; }
.login-inativo .login-wrap { opacity:1; animation:login-inativo .4s; }
.login-fechar { margin-top:-.125rem; }

@keyframes login-ativo {
	0%	 { opacity:0; transform:translateX(8rem); }
	100% { opacity:1; transform:none; }
}
@keyframes login-inativo {
	0%	 { opacity:1; transform:none; }
	100% { opacity:0; transform:translateX(8rem); }
}

.header-usuario { margin:-8px 0; float:right; }
.header-usuario-texto { color:rgba(255,255,255,.7); font-size:.75rem; line-height:100%; }
.header-usuario-texto-a { color:rgba(255,255,255,.7); transition:color .25s; }
.header-usuario-texto-a:hover { color:rgba(255,255,255,1); }
.header-usuario-texto-lista-preco { display:none; }
.header-usuario-texto + .header-usuario-texto { margin-top:.5rem; }
.header-usuario-texto-porcentagem { margin-top:.25rem; color:rgba(255,255,255,.7); font-size:.75rem; line-height:100%; }
.header-usuario-input { width:42px; border:1px solid rgba(255,255,255,.24); margin-right:4px; display:inline-block; color:rgba(255,255,255,.7); text-align:center; transition:color .25s; }
.header-usuario-input:focus { color:rgba(255,255,255,1); }

@media all and (min-width:480px) {
	.header-usuario { margin:-18px 0; }
	.header-usuario-texto-lista-preco { margin-top:.5rem; display:block; }
}
@media all and (min-width:800px) {
	.header-usuario { margin:-8px 0; }
	.header-usuario-texto { font-size:.875rem; line-height:100%; }
	.header-usuario-texto + .header-usuario-texto { margin-top:.75rem; }
	.header-usuario-texto-porcentagem { font-size:.875rem; line-height:100%; }
}
@media all and (min-width:960px) { .header-usuario { margin:30px 0; } }



/* ---- Social ---- */


.social {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:20px;
	list-style:none; }

.social-link {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	transition:opacity 0.2s; }

.social-link:hover {
	opacity:0.6; }

.social-link-icone {
	width:20px;
	height:20px;
	display:block; }

.social-link-texto {
	color:#fff;
	font-size:16px;
	line-height:20px; }


.a-img {
	width:100%;
	height:100%;
	object-fit:cover; }



/* ---- Rodapé ---- */



.footer { padding:1.5rem 0; text-align:center; }
.footer-p { margin-bottom:1rem; font-size:.75rem; line-height:1.25rem; }
.footer-a { height:1.5rem; display:inline-block; }

@media all and (min-width:560px) {
	.footer { text-align:left; }
	.footer-p { margin:0; float:left; line-height:1.5rem; }
	.footer-a { height:24px; float:right; }
}
@media all and (min-width:640px) {
	.footer { padding:1.75rem 0; }
	.footer-p { line-height:2rem; }
	.footer-a { height:2rem; }
}


/* ---- WhatsApp ---- */


.c-whatsapp {
	padding:8px;
	position:fixed;
	bottom:20px;
	right:20px;
	background-color:#25d366;
	border-radius:50%; }

.c-whatsapp__icone {
	width:32px;
	height:32px; }



/* ---- Conteúdo ---- */



.wrap { max-width:1200px; padding-right:24px; padding-left:24px; margin:0 auto; }

@media all and (min-width: 640px) { .wrap { padding:0 28px; } }
@media all and (min-width: 800px) { .wrap { padding:0 32px; } }
@media all and (min-width: 960px) { .wrap { padding:0 36px; } }
@media all and (min-width:1120px) { .wrap { padding:0 40px; } }

.padding-section { padding-top:3rem; padding-bottom:3rem; }

.padding-section-025 	{ padding-top: .25rem; padding-bottom: .25rem; }
.padding-section-05 	{ padding-top:  .5rem; padding-bottom:  .5rem; }
.padding-section-075 	{ padding-top: .75rem; padding-bottom: .75rem; }
.padding-section-1		{ padding-top:   1rem; padding-bottom:   1rem; }
.padding-section-125 	{ padding-top:1.25rem; padding-bottom:1.25rem; }
.padding-section-15 	{ padding-top: 1.5rem; padding-bottom: 1.5rem; }
.padding-section-2 		{ padding-top:   2rem; padding-bottom:   2rem; }

.padding-wrap-025		{ padding-right: 4px; padding-left: 4px; }
.padding-wrap-05		{ padding-right: 8px; padding-left: 8px; }
.padding-wrap-075		{ padding-right:12px; padding-left:12px; }
.padding-wrap-1			{ padding-right:16px; padding-left:16px; }
.padding-wrap-15 		{ padding-right:24px; padding-left:24px; }

.background-branco { background:#ffffff; }
.box-shadow { box-shadow:0 4px 24px 0 rgba(0,0,0,.16); }

.titulo { font-size:1.5rem; letter-spacing:10px; line-height:2rem; text-align:center; text-shadow:0 4px 24px rgba(0,0,0,.16); text-transform:uppercase; }



/* ---- Formulário ---- */



.form { padding-bottom:1rem; display:block; }
.form-label {
	padding:0 0 .5rem 16px; display:block; overflow:hidden; color:rgba(255,255,255,.7);
	font-size:.75rem; line-height:100%; text-shadow:0 4px 24px rgba(0,0,0,.16); white-space:nowrap;
}
.form-aviso { padding:.5rem 0 0 16px; color:#ffffff; font-size:.75rem; line-height:100%; text-shadow:0 4px 24px rgba(0,0,0,.16); }

.form-input {
	width:100%; padding:.5625rem 16px; border:1px solid #ffffff; font-size:.75rem; line-height:1.125rem;
	background:#ffffff; box-shadow:0 4px 24px rgba(0,0,0,.16); transition:color .25s;
}
.form-input:focus { color:rgba(0,0,0,.87); }

.form-select { padding-right:48px; background:#ffffff url(../img/form-select.svg?2) calc(100% - 12px) center / 1.5rem no-repeat; border-radius:0; }
.form-textarea { height:6.5rem; }

.form-highlight-certo { border-color:#4caf50; }
.form-highlight-erros { border-color:#f44336; }

.form-alerta { width:100%; padding:.625rem 16px; margin-bottom:1rem; color:#ffffff; font-size:.75rem; line-height:1.125rem; box-shadow:0 4px 24px rgba(0,0,0,.16); }
.form-alerta-certo { background:#4caf50; }
.form-alerta-erros { background:#f44336; }

.form-button {
	padding:.625rem 16px; border:none; color:#212121; font-size:.75rem; font-weight:bold; line-height:1.125rem; text-transform:uppercase;
	background:#ffffff; box-shadow:0 4px 24px rgba(0,0,0,.16); cursor:pointer; transition:opacity .25s;
}
.form-button:hover { opacity:.8; }
.form-loading { cursor:default; opacity:.7; }

.form-container { margin-right:-8px; margin-left:-8px; }
.form-container .form { padding:0 8px 1rem; }
.form-container .form-alerta { width:calc(100% - 16px); margin:0 8px 1rem; }
.form-container .form-button { margin-left:8px; }
.form-p { width:50%; float:left; }

@media all and (min-width:640px) {
	.form-m { width:50%; float:left; }
	.form-p { width:25%; }
}



/* ---- Tipografia ---- */



.color-branco-1 { color:rgba(255,255,255, 1); }
.color-branco-2 { color:rgba(255,255,255,.7); }
.color-branco-3 { color:rgba(255,255,255,.5); }
 
.color-preto-1 { color:rgba(0,0,0,.87); }
.color-preto-2 { color:rgba(0,0,0,.54); }
.color-preto-3 { color:rgba(0,0,0,.38); }

.font-size-075	{ font-size: .75rem; line-height:100%; }
.font-size-0875	{ font-size:.875rem; line-height:100%; }
.font-size-1	{ font-size:   1rem; line-height:100%; }
.font-size-125	{ font-size:1.25rem; line-height:100%; }
.font-size-15	{ font-size: 1.5rem; line-height:100%; }
.font-size-2	{ font-size:   2rem; line-height:100%; }
.font-size-3	{ font-size:   3rem; line-height:100%; }
.font-size-4	{ font-size:   4rem; line-height:100%; }

.font-style-italic	{ font-style:italic; }
.font-weight-bold	{ font-weight:bold; }

.line-height-100  { line-height:100%; }
.line-height-120  { line-height:120%; }
.line-height-150  { line-height:150%; }
.line-height-auto { line-height:normal; vertical-align:middle; display:inline-block; }
 
.text-align-center	{ text-align:center; }
.text-align-left	{ text-align:  left; }
.text-align-right	{ text-align: right; }

.text-shadow { text-shadow: 0 4px 24px rgba(0,0,0,.16); }

.text-transform-uppercase { text-transform:uppercase; }



/* ---- Extras ---- */



.link-opacity 		{ transition:opacity .25s; }
.link-opacity:hover { opacity:.8; }

.margin-top-0125 { margin-top:.125rem; }
.margin-top-025	 { margin-top: .25rem; }
.margin-top-05	 { margin-top:  .5rem; }
.margin-top-075  { margin-top: .75rem; }
.margin-top-0875 { margin-top:.875rem; }
.margin-top-1	 { margin-top: 	 1rem; }
.margin-top-125  { margin-top:1.25rem; }
.margin-top-15	 { margin-top: 1.5rem; }
.margin-top-2	 { margin-top:   2rem; }
.margin-top-25	 { margin-top: 2.5rem; }
.margin-top-3	 { margin-top:   3rem; }
.margin-top-4	 { margin-top:   4rem; }

.img-container	{ width:100%; height:0; padding-bottom:100%; overflow:hidden; position:relative; }
.img-retina		{ width:100%; height:100%; }
.img-icone 		{ width:24px; height:24px; }
 
.img-position { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.img-position-cover   { min-width:100%; min-height:100%; }
.img-position-contain { max-width:100%; max-height:100%; }

.clear-both { height:0; overflow:hidden; clear:both; }
 
.display-block	{ display:block; }
.display-inline	{ display:inline-block; }
.display-none	{ display:none; }
 
.float-left		{ float: left; }
.float-right	{ float:right; }

.overflow-hidden { overflow:hidden; }
 
.position-absolute { position:absolute; top:0; left:0; }
.position-relative { position:relative; }

.divisor { height:.0625rem; overflow:hidden; }
.divisor-branco { background:#ffffff; box-shadow:0 4px 24px 0 rgba(0,0,0,.16); }
.divisor-preto  { background:rgba(0, 0, 0, .12); }



/* ----- Efeitos ----- */



.fx-denied { animation:fx-denied .6s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes fx-denied {
	10%, 90% 		{ transform:translate3d(-.0625rem, 0, 0); }
	20%, 80% 		{ transform:translate3d(  .125rem, 0, 0); }
	30%, 50%, 70% 	{ transform:translate3d(  -.25rem, 0, 0); }
	40%, 60% 		{ transform:translate3d(   .25rem, 0, 0); }
}



.fx-opacity-in 		{ animation:fx-opacity-in  .3s; }
.fx-opacity-out 	{ animation:fx-opacity-out .3s; }

@keyframes fx-opacity-in  { from { opacity:0; } to { opacity:1; } }
@keyframes fx-opacity-out { from { opacity:1; } to { opacity:0; } }


@keyframes modal-ativo {
	0%	 { opacity:0; transform:translateY(-2rem); }
	100% { opacity:1; transform:none; }
}



/* ------- Orçamento ----- */

.orcamento {
	max-width:300px; width:100%; height:100%; padding-bottom:18.25rem; display:none; overflow:auto; position:fixed; top:0; right:0;
	z-index:99; background:#f5f5f5; box-shadow:-2px 2px 8px 2px rgba(0,0,0,.24);
}
.orcamento-ativo { display:block; animation:orcamento-ativo .4s; }
.orcamento-inativo { display:block; animation:orcamento-inativo .4s; }
.orcamento-erro-form { padding-bottom:26rem; }

.orcamento-produto { padding:1rem 56px 1rem 16px; border-top:1px solid rgba(0,0,0,.12); position:relative; }
.orcamento-produto-figure { width:100px; height:75px; border:4px solid #ffffff; float:left; overflow:hidden; background:center / cover no-repeat; box-shadow:0 4px 24px 0 rgba(0,0,0,.16); }
.orcamento-produto-conteudo { width:calc(100% - 100px); min-height:75px; padding-left:16px; float:left; line-height:75px; }
.orcamento-produto-excluir { position:absolute; top:calc(50% - .75rem); right:16px; color:rgba(0,0,0,.54); transition:color .25s; }
.orcamento-produto-excluir:hover { color:rgba(0,0,0,.87); }

.orcamento-form { max-width:300px; width:100%; border-top:1px solid rgba(0,0,0,.12); position:fixed; right:0; bottom:1.5rem; background:#f5f5f5; }
.orcamento .form-label { color:rgba(0,0,0,.54); }
.orcamento .form-aviso { color:#f44336; }
.orcamento .form-input { border-color:#212121; color:rgba(0,0,0,.54); background:#ffffff; }
.orcamento .form-input::-webkit-input-placeholder 	{ color:rgba(0,0,0,.54); }
.orcamento .form-input::-moz-placeholder 			{ color:rgba(0,0,0,.54); }
.orcamento .form-input:-ms-input-placeholder 		{ color:rgba(0,0,0,.54); }
.orcamento .form-input:-moz-placeholder 			{ color:rgba(0,0,0,.54); }
.orcamento .form-input:focus 						{ color:rgba(0,0,0,.87); }

.orcamento .form-highlight-erros { border-color:#f44336; }

.orcamento-button {
	max-width:300px; width:100%; padding:.625rem 16px; border:none; position:fixed; right:0; bottom:0;
	color:#212121; font-size:.75rem; font-weight:bold; line-height:1.25rem; text-align:center; text-transform:uppercase; white-space:nowrap;
	background:#ffffff; box-shadow:0 4px 24px rgba(0,0,0,.16); cursor:pointer; transition:opacity .25s;
}

@keyframes orcamento-ativo {
	0%	 { opacity:0; transform:translateX(8rem); }
	100% { opacity:1; transform:none; }
}
@keyframes orcamento-inativo {
	0%	 { opacity:1; transform:none; }
	100% { opacity:0; transform:translateX(8rem); }
}

@media all and (min-width:400px) {
	.orcamento-produto-figure { width:120px; height:90px; }
	.orcamento-produto-conteudo { width:calc(100% - 120px); min-height:90px; line-height:90px; }
}
@media all and (min-width:480px) { .orcamento, .orcamento-form, .orcamento-button { max-width:380px; } }