@charset "utf-8";

#rubric2 {
	background: #f8f8f8;
}
#rubric2__holder{
	max-width: 800px;
	margin: auto;
	padding: 7rem 40px 5rem;
}
.rubric2__stage {
	background: transparent;
	padding: .5rem;
	border-radius: 15px;
}
.rubric2__stage:hover {
	background: rgba(56, 74, 203, .05);
}
.rubric2__stage + hr {
	margin-top: 1.5rem;
	margin-bottom: 2.5rem;

	border: 0;
    height: 2px;
    background: var(--brand-blue);
}
.rubric2__stage > summary{
	display: flex;
	cursor: pointer;
}
.rubric2__stageGrid{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: -webkit-fill-available;
}
.rubric2__text {
	flex-grow: 1;
	padding: 0 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.rubric2__icon {
	height: 5rem;
}
.rubric2__icon > img {
	max-height: 100%;
}
.rubric2__stageNumber {
	text-transform: uppercase;
	font-size: 1.5rem;
	color: var(--brand-blue);
}
.rubric2__stageName {
	text-transform: uppercase;
	font-size: 2rem;
	font-weight: 700;
	color: var(--brand-blue);
}
.rubric__stageIcon > svg{
	width: 2rem;
	color: var(--brand-blue);
}
.rubric2__stage .rubric__stageIcon{
	transform: rotate(0deg);
	transition: .3s;
}
.rubric2__stage[open] .rubric__stageIcon{
	transform: rotate(180deg);
	transition: .3s;
}
.rubric2__stageContent {
	margin-top: 2.5rem;
}

#rubric2__secondGrid{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.rubric2__secondGridTitles{
	text-transform: uppercase;
	font-weight: 600;
	color: var(--brand-purple);
}
.rubric2__secondGridUnit{

}
.rubric2__secondGridUnit ul{
	line-height: 1.5;
}
.rubric2__secondGridUnit li::marker{
	color: var(--brand-purple);
}
#rubric2__btnHolder{
	width: fit-content;
    margin: auto;
}
#rubric2__btnExample{
	background: var(--brand-purple);
    padding: .5rem .75rem;
	border: 0;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}
#rubric2__btnExample:hover{
	background: #8b00cc;
}


@media only screen and (max-width: 900px) {

	.rubric2__stage{
		padding: .75rem;
	}
	.rubric2__stage:hover{
		background: transparent;
	}
	.rubric2__stage > summary{
		flex-direction: column;
		align-items: center;
	}

	.rubric2__text{
		padding: 0;
	}
	.rubric2__stageNumber{
		font-size: 1rem;
		margin-top: 1rem;
	}
	.rubric2__stageName{
		font-size: 1.5rem;
	}
}