/* font-family: 'Poppins', sans-serif; */

:root {
    --header-height: 4.5rem;

    /*colors*/
    --hue: 159;
    /* HSL color mode */
    --background-1: #ececec;
    --box: #b3b3b3;
    --box-hover: #2857A5;
    --base-color-second: hsl(var(--hue) 65% 88%);
    --base-color=alt: hsl(var(--hue) 57% 53%);
    --title-color: hsl(var(--hue) 41% 10%);
    --text-color: hsl(0 0% 46%);
    --text-color-light: hsl(0 0% 98%);
    --body-color: hsl(0 0% 98%);
}

.home {
	width: 100%;
	height: 234px;
}

.menu {
	width: 100%;
}

.slider {
	width: 100%;
	height: 234px;
	background: black;
}

.ocult {
	width: 100%;
	height: 0px;
	background: yellow;
}

/* ############## APRESENTAÇÃO ############## */

.base {
	padding: 8%;
	font-family: 'Poppins', sans-serif;
}

.apresentacao {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: black;
	text-align: center;
	padding: 5% 0%;
}

.apresentacao img {
	margin-bottom: 10px;
}

.apresentacao h1 {
	color: white;
	font-size: 2em;
}

.apresentacao h2 {
	color: white;
	font-size: 1.5;
	font-weight: 200;
}

.apresentacao h3 {
	color: white;
}

.apresentacao p {
	color: yellow;
}

/* ############## REDES SOCIAIS ############## */

#redes-sociais {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#facebook i {
	color: white;
	font-size: 25px;
}

#instagram i {
	color: white;
	font-size: 25px;
}

#email i {
	color: white;
	font-size: 25px;
}

/* ############## ESCRITÓRIO ############## */

.escritorio {
	width: 100%;
	max-height: default;
	display: flow-root;
	background-image: url(../../assets/img/escritorio-b.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.escritorio #quadro {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: black;
	opacity: 50%;
	padding: 4%;
}

#quadro h2 {
	font-size: 2.5rem;
	color: white;
}

#quadro h3 {
	font-weight: 400;
	font-size: 1.7rem;
	color: white;
}

#quadro p {
	color: white;
}

#quadro button {
	width: 100%;
	height: auto;
	background: red;
	text-align: center;
}

#quadro botton a {
	color: white;
}

#quadro botton a:visited {
	color: greenyellow;
}

/* ############## BLOG ############## */

.blog {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: #e6e6e6;
	text-align: center;
}

.blog h2 {
	font-size: 2em;
	color: white;
	text-shadow: 5px 5px 5px black;
}

.materia {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: #e6e6e6;
	margin-bottom: 0px;
}

.materia h3 {
	font-size: 1.5em;
	text-align: center;
	margin-top: 20px;
}

.materia h4 {
	font-size: 1em;
	margin-top: 10px;
}

.materia p {
	font-size: 1.3em;
	text-align: justify;
	color: black;
}

.mais-materias {
	background: #D6AD60;
	color: white;
	padding: 2% 4%;
	border: none;
	border-radius: 50px;
	font-size: 1.5em;
}

/* ############## BLOG ############## */



/* ############## PAPEL DO ADVOGADO ############## */

.inventario {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: #D6AD60;
	padding: 5% 5%;
	text-align: center;
}

.inventario h2 {
	font-size: 2em;
}

.inventario p {
	font-size: 1.3em;
	color: white;
}

/* ############## PAPEL DO ADVOGADO ############## */



/* ############## REDES SOCIAIS ############## */

.redes-sociais {
	width: 100%;
	max-height: default;
	display: flow-root;
	text-align: center;
	margin-bottom: 20px;
	padding: 5%;
}

.redes-sociais h2 {
	color: #2957A4;
}

.redes-sociais .quadro {
	width: 100%;
	height: 50px;
	text-align: center;
	padding: 0% 27%;
}

.quadro .botoes img {
	float: left;
	padding: 0% 2%;
}

/* ############## SEGUIR NAS REDES SOCIAIS ############## */

.seguir {
	width: 100%;
	max-height: default;
	display: flow-root;
	padding: 0% 5%;
	text-align: center;
}

.seguir h2 {
	color: #2957A4;
}

.seguir #quadro {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: white;
	margin-bottom: 20px;
}

.seguir #quadro img {
	padding: 0% 5%;
}

/* ############## MAPA ############## */
.mapa {
	width: 100%;
	height: 450px;
	margin-bottom: 20px;
}

#whatsapp img {
	position: fixed;
	top: 83%;
	right: 5%;
	z-index: 10;
}

/* ############## CONTATOS ############## */

.redes {
	display: none;
}

/* ############## CONTATO ############## */

.contato {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: gray;
	padding: 5% 10%;
	text-align: center;
}

.contato h1 {
	color: white;
}

.contato .caixas {
	width: 100%;
	margin-bottom: 10px;
	background: #F0F1F2;
	border: none;
}

.contato .mensagem {
	width: 100%;
	height: 200px;
	margin-bottom: 10px;
	background: #F0F1F2;
	border: none;
}

.contato .botton {
	width: 60%;
	height: 40px;
	background: #D6AD60;
	color: white;
	border: none;
	border-radius: 10px;
}

/* RODAPÉ início */

.rodape  {
	width: 100%;
	height: 389px;
	text-align: center;
	position: relative;
	background-image: url(../../assets/img/bg-footer.jpg);
}

.rodape img {
	margin-top: 20px;
	margin-bottom: 20px;
}



/* ############## PÁGINA ############## */
/* ############## ESCRITÓRIO ############## */

.apresentacao-escritorio {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: black;
	padding: 5% 10%;
}

.apresentacao-escritorio h1 {
	font-size: 1.5em;
	text-align: center;
	color: white;
}

.apresentacao-escritorio h2 {
	font-size: 1.5em;
	text-align: center;
	color: white;
	font-weight: 200;
}

.apresentacao-escritorio p {
	text-align: justify;
	color: white;
}

/* ----------------------------------------- */ @media screen and (min-width: 768px) { /* -------------------------------------- */

.home {
	width: 100%;
	height: 234px;
	margin-bottom: 700px;
}

.slider {
	width: 100%;
	height: 234px;
	margin-bottom: 700px;
}

/* APRESENTAÇÃO - início */

.apresentacao {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: black;
	text-align: center;
	padding: 2% 0%;
}

/* ############## ESCRITÓRIO ############## */

.escritorio {
	width: 100%;
	max-height: default;
	display: flow-root;
	background-image: url(../../assets/img/escritorio.webp);
	background-repeat: no-repeat;
	background-size: cover;
}

.escritorio #quadro {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: black;
	opacity: 50%;
	padding: 2% 20%;
	text-align: center;
}

#quadro h2 {
	font-size: 2.5rem;
	color: white;
	text-align: center;
}

#quadro h3 {
	font-weight: 400;
	font-size: 1.7rem;
	color: white;
	text-align: center;
}

#quadro button {
	width: 60%;
	height: 100px;
	background: red;
	text-align: center;
}

#quadro a {
	color: white;
	margin-top: 30px;
	text-align: center;
}

/* ############## BLOG ############## */

.blog {
	padding: 5% 10%;
}

.blog h2 {
	font-size: 2em;
	color: white;
	text-shadow: 5px 5px 5px black;
}

.materia {

}

.materia h3 {
	font-size: 1.5em;
	text-align: center;
	margin-top: 20px;
}

.materia p {
	font-size: 1.2em;
}

.mais-materias {
	background: #D6AD60;
	color: white;
	padding: 1% 2%;
	border: none;
	border-radius: 50px;
	font-size: 1.5em;
}

.mais-materias:hover {
	background: black;
	transition: 1s;
}

.mais-materias a {
	color: white;
}

.mais-materias a:hover {
	color: yellow;
	transition: 1s;
}

/* ############## BLOG ############## */



/* ############## PAPEL DO ADVOGADO ############## */

.inventario {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: #D6AD60;
	padding: 2% 5%;
	text-align: center;
	margin-bottom: 50px;
}

.inventario h2 {
	font-size: 2.5em;
}

.inventario p {
	font-size: 1.5em;
	color: white;
}

/* ############## PAPEL DO ADVOGADO ############## */



/* ############## REDES SOCIAIS ############## */

.redes {
	width: 10%;
	max-height: default;
	display: flow-root;
	position: fixed;
	top: 45%;
	right: 2%;
	z-index: 10;
}

.botao img {
	clear: none;
	z-index: 10;
}

.botao {
	width: 96px;
	height: 96px;
	background-image: url(../../assets/img/botao-zap.webp);
}

.botao:hover {
	background-image: url(../../assets/img/botao-zap-rll.webp);
	transition: 1s;
	opacity: 70%;
}

.botao2 {
	width: 96px;
	height: 96px;
	background-image: url(../../assets/img/botao-tel.webp);
}

.botao2:hover {
	background-image: url(../../assets/img/botao-tel-rll.webp);
	transition: 1s;
	opacity: 70%;
}

.botao3 {
	width: 96px;
	height: 96px;
	background-image: url(../../assets/img/botao-email.webp);
}

.botao3:hover {
	background-image: url(../../assets/img/botao-email-rll.webp);
	transition: 1s;
	opacity: 70%;
}

/* ############## MAPA ############## */
.mapa {
	margin-bottom: 20px;
}


/* ############## CONTATO ############## */

.contato {
	padding: 5% 20%;
	background-image: url(../../assets/img/contato.webp);
	background-repeat: no-repeat;
	background-size: cover;
}

.contato h1 {
	margin-left: 45%;
	color: white;
}

.contato .caixas {
	width: 70%;
	margin-left: 38%;
	border: none;
	background: white;
	padding: 1%;
	box-shadow: -5px 5px 5px #BFBFBF;
}

.contato .mensagem {
	width: 70%;
	height: 300px;
	margin-left: 38%;
	border: none;
	background: white;
	box-shadow: -5px 5px 5px #BFBFBF;
	padding: 1%;
}

.contato .botton {
	width: 30%;
	height: 60px;
	background: #D6AD60;
	color: white;
	border: none;
	border-radius: 10px;
	margin-left: 6%;
}

.contato .botton:hover {
	background: white;
	color: #D6AD60;
	transition: 1s;
}

/* ############## REDES SOCIAIS ############## */

.redes-sociais {
	max-height: default;
	display: flow-root;
	margin-bottom: 20px;
	padding: 0% 5%;
	text-align: center;
	margin-top: -30px;
}

.redes-sociais h2 {
	color: #2957A4;
}

.redes-sociais .quadro {
	width: 100%;
	height: 50px;
	text-align: center;
	padding: 0% 40%;
}

.quadro .botoes img {
	float: left;
	padding: 0% 4%;
}

.quadro .botoes img:hover {

}

/* ############## SEGUIR NAS REDES SOCIAIS ############## */

.seguir {
	width: 100%;
	max-height: default;
	display: flow-root;
	padding: 0% 5%;
	text-align: center;
}

.seguir h2 {
	color: #2957A4;
}

.seguir #quadro {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: white;
	margin-bottom: 20px;
}

.seguir #quadro img {
	padding: 0% 2%;
}

/* FOOTER - início */

.rodape {
	width: 100%;
	height: 389px;
	background-image: url(../../assets/img/bg-footer.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.rodape .seta {
	margin-top: 20px;
	margin-bottom: 30px;
}

.rodape .seta:hover {
	opacity: 60%;
	transition: 1s;
}

#webmail {
	position: absolute;
	top: 10px;
	left: 5%;
}



/* ############## PÁGINA ############## */
/* ############## ESCRITÓRIO ############## */