.section-description {
	font-size: var(--3u);
	padding: var(--1u) var(--12u);

	background-color: var(--color-bg-section-description);

	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.section-description i {
	font-family: var(--font-family-primary);
}
.section-container {
	margin-left: auto;
	margin-right: auto;

	/* padding-top: var(--4u); */
	padding-bottom: var(--4u);

}
.mobile #content-container .section-container {
	margin-left: var(--4u);
	margin-right: var(--4u);
}

.section-container {
	width: var(--w);
}
.mobile #content-container .section-container { --w: var(--width-content-mobile); }
.tablet #content-container .section-container { --w: var(--width-content-tablet); }
.desktop #content-container .section-container { --w: var(--width-content-desktop); }


section h2 {
	font-family: var(--font-family-primary-bold);
	font-size: var(--font-size-title);
	/* margin-top: var(--4u); */
	/* margin-bottom: var(--3u); */
}
section h3 {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-subtitle);
	padding-top: var(--2u);
	padding-bottom: var(--1u);
}
section h4 {
	font-family: var(--font-family-primary);;
	font-size: var(--font-size-subtitle2);
	padding-top: var(--2u);
	padding-bottom: var(--2u);
}

.section-container .observacao {
	font-size: var(--font-size-observacao);
}

section .title-decoration {
	height: 2px;
	width: 100%;
	margin-bottom: var(--3u);
}

.mobile #content-container article,
.tablet #content-container article,
.desktop #content-container article {
	padding-left: var(--12u);
	padding-right: var(--12u);
}

.section-container {
	opacity: .2;
	transition: opacity .5s ease;
}

.section-container a,
.section-container p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-paragraph);

	margin: var(--2u) 0;
}
.section-container a { text-decoration: underline; }
.section-container a:hover { cursor: pointer; }

.section-container article:nth-of-type(1) {
	margin-top: var(--4u);
}

#content-container section {
	transition: background-color .5s ease;
	position: relative;
}
#content-container section.animate {
	/* box-shadow: 0px 0px 30px 30px rgba(0,0,0,.3); */
	z-index: 1;
}

#content-container .animate .section-container {
	opacity: 1;
}

#section-1 {
	background-color: var(--color-verde-bg-off-paulo-gustavo);
	color: white;
}
#section-2 {
	background-color: var(--color-azul-bg-off-paulo-gustavo);
	color: white;
}
#section-3 {
	background-color: var(--color-amarelo-bg-off-paulo-gustavo);
	color: white;
}
#section-4 {
	background-color: var(--color-vermelho-bg-off-paulo-gustavo);
	color: white;
}
#section-1.animate { background-color: var(--color-verde-bg-paulo-gustavo); }
#section-2.animate { background-color: var(--color-azul-bg-paulo-gustavo); }
#section-3.animate { background-color: var(--color-amarelo-bg-paulo-gustavo); }
#section-4.animate { background-color: var(--color-vermelho-bg-paulo-gustavo); }


.section-title-container {
	transition: background-color .5s ease;

	z-index: 1;
}
.tablet .section-title-container,
.desktop .section-title-container {
	position: sticky;
	top: 0px;
}

#section-1 .section-title-container { background-color: var(--color-verde-bg-off-paulo-gustavo); }
#section-2 .section-title-container { background-color: var(--color-azul-bg-off-paulo-gustavo); }
#section-3 .section-title-container { background-color: var(--color-amarelo-bg-off-paulo-gustavo); }
#section-4 .section-title-container { background-color: var(--color-vermelho-bg-off-paulo-gustavo); }

#section-1.animate .section-title-container { background-color: var(--color-verde-bg-paulo-gustavo); }
#section-2.animate .section-title-container { background-color: var(--color-azul-bg-paulo-gustavo); }
#section-3.animate .section-title-container { background-color: var(--color-amarelo-bg-paulo-gustavo); }
#section-4.animate .section-title-container { background-color: var(--color-vermelho-bg-paulo-gustavo); }


#section-1 .title-decoration,
#section-2 .title-decoration,
#section-3 .title-decoration,
#section-4 .title-decoration {
	background-color: #fff;
}

.section-title-container {
	padding-top: var(--4u);
}

.section-title-container .wrapper {
	display: flex;
	flex-direction: row;

	padding-top: var(--8u);
	padding-bottom: var(--3u);

	border-bottom: 2px solid var(--color-branco);

	--margin-left-h2: var(--4u);
	--rotation-icon: rotate(0deg);
	--margin-left-icon: var(--0u);
}
/*
.section-title-container:hover {
	--margin-left-h2: var(--3u);
	--rotation-icon: rotate(150deg);
	--margin-left-icon: var(--2u);
}*/

.section-container button p {
	font-size: var(--font-size-button-label);
	margin: 0px;
}



.svg-section-icon {
	position: relative;

	--prop-xy: 0.5625;
	--prop-yx: 1.78;

	--h: calc( var(--w) * var(--prop-yx) );
	--w: var(--8u);

	height: var(--h);
	width: var(--w);
}
.svg-section-icon svg {
	position: absolute;
	top: 0px;
	transform-origin: 64px 31px;
	transition: transform .7s ease-in-out;
	transform: rotate(0deg);
}
.svg-section-icon g {
	transform-origin: center;
	transform: scale(.9);
}
.animate .svg-section-icon svg[index="0"] { transform: rotate(120deg); }
.animate .svg-section-icon svg[index="1"] { transform: rotate(80deg); }
.animate .svg-section-icon svg[index="2"] { transform: rotate(40deg); }
.animate .svg-section-icon svg[index="3"] { transform: rotate(0deg); }
/*
#section-1 .svg-path-section-icon { fill: var(--color-vermelho-paulo-gustavo); }
#section-2 .svg-path-section-icon { fill: var(--color-azul-paulo-gustavo); }
#section-3 .svg-path-section-icon { fill: var(--color-verde-paulo-gustavo); }
#section-4 .svg-path-section-icon { fill: var(--color-azul-paulo-gustavo); }*/

.animate .svg-section-icon svg[index="0"] .svg-path-section-icon { fill: var(--color-verde-paulo-gustavo); }
.animate .svg-section-icon svg[index="1"] .svg-path-section-icon { fill: var(--color-azul-paulo-gustavo); }
.animate .svg-section-icon svg[index="2"] .svg-path-section-icon { fill: var(--color-amarelo-paulo-gustavo); }
.animate .svg-section-icon svg[index="3"] .svg-path-section-icon { fill: var(--color-vermelho-paulo-gustavo); }

.svg-path-section-icon {
	fill: white;

	transition: fill 1s ease-in;
}

.section-title-container h2 {
	margin-top: auto;
	margin-bottom: auto;

	margin-left: var(--2u);
	transition: margin-left 1s ease-in-out;
}

.section-title-container h2 {
	margin-left: var(--margin-left-h2);
}
/* .section-title-container.is-active h2 {
	margin-left: var(--6u);
} */

/* .is-active .svg-section-icon {
	transform: rotate(60deg);
} */

/* .is-active .svg-section-icon {
	transform: rotate(60deg);
} */

.subsection-container {
	/* --w-container: var(--w); */
	/* --w: calc( var(--w-container) - var(--4u) ); */
	background-color: rgba(0,0,0,.1);
	padding: var(--2u);
	border-radius: var(--2u);
}

.wrapper-dotted {
	margin-top: var(--2u);
	margin-bottom: var(--2u);
	padding: var(--2u);
	outline: 1px dotted #fff;
	border-radius: 2px;
}