/*
.drawer

A block animated to behave like a drawer that reveals content when the class
<code>active</code> is added. Note in this example the class <code>toggle</code>
is an action class that gives the block <code>active</code> when a link that
references it is clicked.

Markup: <a href="#some-stuff">Click to show</a>
<div class="drawer block toggle" id="some-stuff">
  <p>Crunchum ipsum dolor sit coder void, constructor function, sed do while loop
  python orientation semi colon incident. Duis aute irure indent tabs or
  spaces velit esse cilium buntum how crunchy duntum.</p>
</div>

Styleguide: 1.1.drawer
*/

.drawer {
	max-height: 0;
	opacity: 0.75;
	overflow: hidden;
	visibility: hidden;
	transition:
		max-height 400ms cubic-bezier(0, 0.5, 0.33, 1),
		padding-top 400ms cubic-bezier(0.8, 0, 0.8, 0),
		padding-bottom 400ms cubic-bezier(0.48, 0.85, 0.8, 1),
		margin-top 400ms cubic-bezier(0.77, 0, 0.79, 0.78),
		margin-bottom 400ms cubic-bezier(0, 0.5, 0.33, 1),
		opacity 400ms linear,
		border-color 400ms linear,
		background-color 400ms linear,
		visibility 400ms linear;
}

.drawer:not(.active) {
	padding-top: 0;
	padding-bottom: 0;
}

.drawer.active {
	max-height: 100rem;
	opacity: 1;
	visibility: visible;
	transition:
		max-height 333ms cubic-bezier(0.4, 0, 1, 0.32),
		padding-top 333ms cubic-bezier(0.2, 1, 0.2, 1),
		padding-bottom 333ms cubic-bezier(0.6, 0.9, 0.7, 1),
		margin-top 333ms cubic-bezier(0, 0.62, 0.35, 0.82),
		margin-bottom 333ms cubic-bezier(0, 0.4, 1, 0.32),
		opacity 240ms linear,
		border-color 333ms linear,
		background-color 167ms linear,
		visibility 333ms linear;
}
.drawer-big.active{
	max-height: 350rem;
}