* {margin: 0; padding: 0; box-sizing: border-box; font-family: "Montserrat"}

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {

	/* COLORS */
  --WHITE: #fff;
  --BLACK: #000;
  --GRAY-20: #CCC;
  --GRAY-50: #808080;
  --BEGE: #D6AD60;
  --AZUL: #29529F;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.banner {
	width: 100%;
	height: 300px;
	background-image: url(assets/img/blog-advogada-em-inventario-mobile.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.conteudo {
	width: 100%;
	max-height: default;
	display: flow-root;
}

/* -- MATÉRIAS ------------------------------------------------------------------ */

.materias {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: white;
	padding: 7%;
	text-align: center;
}

.materias h1 {
	font-size: 1.5em;
	margin-bottom: 10px;
	color: var(--AZUL);
}

/* -- CADA MATÉRIA ------------------------------------------------------------------ */

.materia {
	width: 100%;
	max-height: default;
	display: flow-root;
	margin-bottom: 5%;
}

.materia img {
	width: 100%;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

.materia h2 {
	font-size: 1.3em;
}

.materia h3 {
	font-size: 1em;
	margin-bottom: 20px;
	text-align: left;
	font-weight: 400;
}

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

.materia .mais {
	font-size: 1em;
	font-weight: 600;
	background: var(--BEGE);
	padding: 5%;
	border: none;
	color: var(--WHITE);
	margin-bottom: 10px;
}

.materia .mais a {
	color: var(--WHITE);
	text-decoration: none;
}

/* -- SEGUIR REDES SOCIAIS ------------------------------------------------------------------ */

.seguir {
	width: 100%;
	max-height: default;
	display: flow-root;
}

.seguir h2 {
	font-size: 1.3em;
	margin-bottom: 20px;
}

..botoes { /* ????ESTES DOIS PONTOS CORRIGIRAM O FLOAT???? */
	width: 20%;
	max-height: default;
	display: flow-root;
	background: white;
}

.botoes img {
	margin-right: 20px;
	margin-bottom: 10px;
}

/* -- CURTIR REDES SOCIAIS ------------------------------------------------------------------ */

.curtir {
	width: 100%;
	max-height: default;
	display: flow-root;
	background: var(--GRAY-20);
	padding: 5%;
}

.curtir h2 {
	font-size: 1.3em;
	margin-bottom: 20px;
}

.curtir .botoes-c {
	width: 100%;
	max-height: default;
	display: flow-root;
}

.curtir .botoes-c a {
	margin-right: 20px;
}

/* -- MENÚ ANTERIORES ------------------------------------------------------------------ */

.anteriores {
	width: 100%;
	min-height: 80vw;
	background: var(--WHITE);
	padding: 5%;
}

.anteriores h2 {
	margin-bottom: 20px;
	text-align: center;
}

.anteriores h3 {
	font-size: 1em;
}

.anteriores .box {
	background: var(--BEGE);
	margin-bottom: 10px;
	padding: 2%;
}

.anteriores .box a {
	text-decoration: none;
	color: var(--WHITE);
	font-weight: 400;
}

/* -- RODAPÉ ------------------------------------------------------------------ */

.rodape {
	width: 100%;
	height: 500px;
	background: black;
	padding: 10%;
	text-align: center;
}

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

.rodape h2 {
	color: var(--WHITE);
	font-size: 1em;
	font-weight: 200;
	margin-bottom: 20px;
}

.rodape a {
	color: var(--WHITE);
	text-decoration: none;
}

.rodape .seta {
	margin-top: 40px;
}

.rodape .seta img {
	width: 50px;
}


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

.banner {
	height: 400px;
	background-image: url(assets/img/blog-advogada-em-inventario.jpg);
}

.conteudo {

}

/* -- MATÉRIAs ------------------------------------------------------------------ */

.materias {
	width: 70%;
	float: left;
	padding: 2% 2% 2% 6%;
}

.materias h1 {

}

.materias h2 {
	font-weight: 600;
}

.materias h3 {

}

.materias p {
	font-size: 1em;
}

.materias a {

}

/* -- CADA MATÉRIA ------------------------------------------------------------------ */

.materia {
	width: 100%;
	float: left;
	margin-right: 2%;
	text-align: left;
}

.materia img {
	width: 100%;
	height: auto;
}

.materia h2 {

}

.materia p {

}

.materia .mais {
	width: 100%;
}

.materia .mais:hover {
	background: var(--AZUL);
	transition-duration: 1s;
}

.seguir {
	width: 100%;
	height: 100px;
	float: left;
	text-align: center;
	margin-bottom: 20px;
}

/* -- MENÚ ANTERIORES ------------------------------------------------------------------ */

.anteriores {
	width: 30%;
	float: right;
	padding: 2%;
}

.anteriores h3 {
	font-size: 1em;
	font-weight: 400;
}

.anteriores .box {
	background: var(--BEGE);
	margin-bottom: 10px;
	padding: 2%;
}

.anteriores .box:hover {
	background: var(--GRAY-20);
	margin-bottom: 10px;
	padding: 2%;
	transition: 1s;
}

.anteriores .box a:hover {
	color: var(--WHITE);
	transition: 1s;
}

/* -- SEGUIR REDES SOCIAIS ------------------------------------------------------------------ */

.botoes img:hover {
	margin-right: 20px;
	margin-bottom: 10px;
	scale: 1.2;
	transition: 1s;
}

/* -- CURTIR REDES SOCIAIS ------------------------------------------------------------------ */

.curtir {
	background-image: url(assets/img/moca-compartilhando.png);
}

.curtir .botoes-c img:hover {
	scale: 1.2;
	transition: 1s;
}


/* -- RODAPÉ ------------------------------------------------------------------ */



/* -- RODAPÉ ------------------------------------------------------------------ */

.rodape {
	padding: 2% 10%;
}

.rodape a:hover {
	color: var(--BEGE);
}

.rodape a:visited {
	color: var(--GRAY-50);
}

.rodape .seta {
	margin-top: 40px;
}

.rodape .seta:hover {
	margin-top: 30px;
	transition: 1s;
}