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



:root {

	--cor-preto-1:rgba(0,0,0,0.87);
    --cor-preto-2:rgba(0,0,0,0.60);
    --cor-preto-3:rgba(0,0,0,0.38);
    --cor-preto-4:rgba(0,0,0,0.26);

	--cor-branco-1:#ffffff;
	--cor-branco-2:rgba(255,255,255,0.7);
	--cor-branco-3:rgba(255,255,255,0.5);
	--cor-branco-4:rgba(255,255,255,0.3);



	--opacity-preto-1:0.87;
	--opacity-preto-2:0.6;
	--opacity-preto-3:0.38;
	--opacity-preto-4:0.26;

	--opacity-branco-1:1;
	--opacity-branco-2:0.7;
	--opacity-branco-3:0.5;
	--opacity-branco-4:0.3;

}



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



*, *::before, *::after { -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 { padding:0; border:none; margin:0; font:inherit; font-size:100%; vertical-align:baseline; }

article, aside, button, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section { display:block; }

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

img { vertical-align:bottom; }
ol, ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }



@font-face {
	font-display:swap; font-family:"Material Icons Round"; font-style:normal; font-weight:400;
	src:url("../../fonts/Material-Icons-Round.woff2") format("woff2");
}

@font-face {
	font-display:swap; font-family:"Montserrat"; font-style:normal; font-weight:400;
	src:url("../../fonts/Montserrat.woff2") format("woff2");
}

@font-face {
	font-display:swap; font-family:"Anton"; font-style:normal; font-weight:400;
	src:url("../../fonts/Anton.woff2") format("woff2");
}

@font-face {
	font-display:swap; font-family:"Glacial"; font-style:normal; font-weight:400;
	src:url("../../fonts/Glacial.woff2") format("woff2");
}


html {
	width:100%; overflow-x:hidden;
	font-size:100%; line-height:1;
	background-color:#fff;
}
body {
	width:100%; min-width:320px;
	color:var(--cor-preto-2); font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height:1; word-wrap:break-word;
	-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;
}



a {
	color:var(--cor-preto-1); text-decoration:none;
	cursor:pointer;
}
button {
	color:var(--cor-preto-1);
	background:none; cursor:pointer;
}



/* ---- Gerais ---- */



.mi, .mi--b::before, .mi--a::after {
	display:inline-block; overflow:hidden; -moz-font-feature-settings:"liga"; -moz-osx-font-smoothing:grayscale;
	direction:ltr; font-family:"Material Icons Round"; font-size:24px; font-style:normal; font-weight:normal;
	letter-spacing:normal; line-height:1; text-transform:none; white-space:nowrap; word-wrap:normal;
}

.clear-both::after { content:""; width:100%; height:0; clear:both; display:block; overflow:hidden; }
.display-flex { display:flex; align-items:center; justify-content:flex-start; }



.objeto-recipiente {
	width:100%; height:0; padding-bottom:75%;
	overflow:hidden; position:relative;
}
.objeto-conteudo {
	width:100%; height:100%;
	position:absolute; top:0; left:0;
	object-fit:cover; object-position:center;
}



.envelope { max-width:1440px; padding:96px 24px; margin:0 auto; }
.envelope__secao { margin-top:48px; }
.envelope__item { margin-top:24px;  }

@media screen and (min-width:1120px) {
	.envelope { padding:96px 40px; }
	.envelope--p { max-width:720px; }
	.envelope--m { max-width:1080px; }
}




.botao {
	height:36px; padding:7px 17px; border:1px solid var(--cor-preto-1); display:inline-block;
	color:var(--cor-branco-1); font-size:16px; line-height:20px; text-transform:uppercase;
	background-color:#e37f7f; border-radius:6px; transition:color 0.2s, box-shadow 0.2s;
}

.botao.ativo,
.botao:hover { color:var(--cor-branco-1); box-shadow:inset 0 0 0 128px var(--cor-branco-3); }



/* ---- Textos ---- */



.texto-corpo { color:var(--cor-preto-2); font-size:16px; line-height:20px; }
.texto-legenda { color:var(--cor-branco-1); font-size:14px; line-height:16px; }

.texto-titulo { color:var(--cor-preto-1); font-size:16px; line-height:20px; text-transform:uppercase; }
.texto-titulo--h1 { font-size:32px; line-height:36px; }
.texto-titulo--h2 { font-size:28px; line-height:32px; }
.texto-titulo--h3 { font-size:24px; line-height:28px; }
.texto-titulo--h4 { font-size:20px; line-height:24px; }

@media screen and (min-width:1120px) {
	.texto-titulo--h1 { font-size:40px; line-height:44px; }
	.texto-titulo--h2 { font-size:32px; line-height:36px; }
}



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



.topo {
	padding-top:24px; padding-bottom:16px;
	flex-wrap:wrap; justify-content:space-between; position:relative;
}

.topo::after {
	content:""; width:calc(100% - 48px); height:1px;
	display:block; position:absolute; bottom:0; left:24px;
	background-color:var(--cor-preto-1);
}

@media screen and (min-width:1120px) {
	.topo::after { width:calc(100% - 80px); left:40px; }
}



.topo__logo {
	width:144px; height:64px; display:block;
	opacity:var(--opacity-preto-1); transition:opacity 0.2s;
}

.topo__logo:focus,
.topo__logo:hover { opacity:var(--opacity-preto-3); }



.topo__mobile {
	height:36px; padding:6px 16px; margin:0 -16px;
	color:var(--cor-preto-1); font-size:16px; line-height:24px; text-transform:uppercase;
	transition:color 0.2s;
}

.topo__mobile::before {
	content:"menu";
	width:24px; height:24px; margin-right:16px; flex-shrink:0;
}
.topo__mobile.ativo::before { content:"menu_open"; }

.topo__mobile:focus,
.topo__mobile:hover { color:var(--cor-preto-3); }

@media screen and (min-width:1024px) {
	.topo__mobile { display:none; }
}



.topo__menu {
	width:100%; padding:48px 0 24px; border-top:1px solid var(--cor-preto-1); margin-top:24px;
	display:none; flex-direction:column; align-items:center;
}
.topo__menu.ativo { display:flex; }

@media screen and (min-width:1024px) {
	.topo__menu {
		width:calc(100% - 144px); padding:0; border:none; margin:0;
		display:flex; flex-direction:row;
	}
}



.topo__site { margin:-8px 0; flex-direction:column; }

.topo__site__botao {
	padding:8px 24px;
	color:var(--cor-preto-1); font-size:14px; line-height:22px;
	text-align:center; text-transform:uppercase; transition:opacity 0.2s;
}

.topo__site__botao:focus,
.topo__site__botao:hover { text-decoration:underline; opacity:var(--opacity-preto-3); }

@media screen and (min-width:1024px) {
	.topo__site { margin:0 auto; flex-direction:row; }
	.topo__site__botao { padding:8px 12px; }
}



.topo__extra { 
	padding:32px 0; 
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px; }



.topo__extra__link {
	height:36px; padding:6px 24px; margin:-6px 0;
	color:var(--cor-preto-1); font-size:14px; line-height:24px; text-transform:uppercase;
	transition:color 0.2s;
}

.topo__extra__link::before {
	width:24px; height:24px; margin-right:8px; flex-shrink:0;
}

.topo__extra__link--ecommerce::before {
	content:"shopping_cart";
}

.topo__extra__link--lojas::before {
	content:"store";
}

.topo__extra__link--catalogo::before {
	content:"local_mall";
}

.topo__extra__link:focus,
.topo__extra__link:hover { color:var(--cor-preto-3); }

@media screen and (min-width:1024px) {
	.topo__extra { 
		flex-direction:row;
		gap:0; }

	.topo__extra__link { padding:6px 8px; margin:0 -16px 0 20px; }
}


@media screen and (min-width:1024px) and (max-width:1399px) {
	.topo__menu {
		flex-wrap:wrap; }

	.topo__site {
		width:100%;
		justify-content:flex-end; }

	.topo__site__botao {
		font-weight:bold; }

	.topo__extra {
		width:100%;
		justify-content:flex-end;
		padding:10px 0; }

	.topo__extra__link {
		font-size:12px; }

	.topo__extra__link::before {
		width:20px;
		height:20px;
		font-size:20px; }
}



/* ---- contato@isdesign.com.br ---- */