.folding-content .toggle {
	cursor: pointer;
	display: flex; /* to align toggle icon */
	align-items: center;
}
.folding-content .toggle:hover {
	color: black;
}

.folding-content:not(.toggle-right) .toggle::before,
.folding-content.toggle-right .toggle::after {
    content: "";
	min-width: 1.25rem;
	width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
	background-position: center;
    background-size: 1.25rem;
	padding: 3px;
	border: 1px solid transparent;

    transition: transform .2s ease-out;
    transition: opacity .3s linear;
}
.folding-content:not(.toggle-right) .toggle::before {
    margin-right: .35rem;
}
.folding-content.toggle-left .toggle::before {
	position: relative;
	left: -2.2rem;
	margin-right: -1.7rem;
}
.folding-content.toggle-right .toggle::after {
    margin-left: auto;
}

@media (hover: hover) {
	.folding-content:not(.toggle-right) .toggle:hover::before,
	.folding-content.toggle-right .toggle:hover::after {
	    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
		background-color: #F1F3F4;
		border-radius: 50%;
		border-color: #D9DBDC;
	}

	.folding-content:not(.toggle-right) .toggle.expand:not(:hover)::before,
	.folding-content.toggle-right .toggle.expand:not(:hover)::after {
		opacity: 0;
	}
}

.folding-content:not(.toggle-right) .toggle.expand::before {
	transform: rotate(-90deg);
}
.folding-content.toggle-right .toggle.expand::after {
    transform: rotate(90deg);
}

.folding-content .toggle:not(.expand) + .para {
	display: none; /* easiest way to collapse, if you don't need animation */
}

/*
.folding-content .toggle + .para {
	overflow: hidden;

	max-height: 1200px; / temporary solution! TODO: calculate content height off-screen!
	transition: max-height .3s ease-out;

}
.folding-content .toggle:not(.expand) + .para {
	max-height: 0;
}*/


/* site-specific */
.folding-content h1 {
	font-size: calc(1.275rem + 0.3vw);
}

.folding-content h2 {
	font-size: 1.25rem;
}

.folding-content h3 {
	font-size: 1rem;
}

@media (max-width: 1200px) {
	.folding-content.toggle-left > .para {
		margin-left: 2.1rem;
	}

	.folding-content.toggle-left .toggle::before {
		left: 0;
		margin-right: 0.3rem;
	}
}