@charset "UTF-8";

/**
.collapsible			== height animation
.collapsible.horizontal	== width animation

off						== .collapsible, .collapsible > *
on						== .collapsible.opened, .collapsible.opened > *

.collapsible-toggle

max-height/max-width	== in JS
**/

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

.collapsible {
	--collapsible-height: 100rem;
	--collapsible-margin: .5em;
}

/*********************************/
/*********************************/
/********** COLLAPSIBLE **********/
/*********************************/
/*********************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.collapsible {
	position: relative;
	display: block;
	overflow: hidden;
	max-height: 0;
}
.collapsible > * {
	opacity: 0;
	width: 100%;
	margin: -webkit-calc(var(--collapsible-margin * -1)) 0 0 0;
	margin: -moz-calc(var(--collapsible-margin * -1)) 0 0 0;
	margin: calc(var(--collapsible-margin * -1)) 0 0 0;
}

/*********************************/
/********** ORIENTATION **********/
/*********************************/

.collapsible.opened {
	max-height: var(--collapsible-height);
	padding: 0;
}
.collapsible.opened > *,
.collapsible.horizontal.opened > * {
	opacity: 1;
	margin: 0;
}
.collapsible.horizontal {
	max-height: none;
	max-width: 0;
}
.collapsible.horizontal.opened {
	max-width: var(--collapsible-height);
}
.collapsible.horizontal > * {
	margin: 0 0 0 -webkit-calc(var(--collapsible-margin) * -1);
	margin: 0 0 0 -moz-calc(var(--collapsible-margin) * -1);
	margin: 0 0 0 calc(var(--collapsible-margin) * -1);
}

/****************************/
/****************************/
/********** TOGGLE **********/
/****************************/
/****************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.collapsible-toggle {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 1em;
	cursor: pointer;
	text-decoration: none;
}
.collapsible-toggle * {
	text-decoration: none;
}

/**************************/
/********** ICON **********/
/**************************/

.collapsible-toggle:before {
	font-family: 'icomoon';
	content: "\e900";
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	   -moz-box-ordinal-group: 3;
	    -ms-flex-order: 2;
	        order: 2;
	font-size: .75em;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.collapsible-toggle.active:before {
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
}

.entry .collapsible-toggle:before {
	position: absolute;
	bottom: 0;
	right: 0;
}

/********************************/
/********************************/
/********** ANIMATIONS **********/
/********************************/
/********************************/

/*********************************/
/********** COLLAPSIBLE **********/
/*********************************/

.collapsible {
  -webkit-transition:
    max-height var(--duration-normal),
    max-width var(--duration-normal),
    margin var(--duration-fast),
    padding var(--duration-fast);
  -o-transition:
    max-height var(--duration-normal),
    max-width var(--duration-normal),
    margin var(--duration-fast),
    padding var(--duration-fast);
  -moz-transition:
    max-height var(--duration-normal),
    max-width var(--duration-normal),
    margin var(--duration-fast),
    padding var(--duration-fast);
  transition:
    max-height var(--duration-normal),
    max-width var(--duration-normal),
    margin var(--duration-fast),
    padding var(--duration-fast);
}
.collapsible {
	-webkit-transition-delay: -webkit-calc(var(--duration-fast) / 2);
	   -moz-transition-delay: -moz-calc(var(--duration-fast) / 2);
	     -o-transition-delay: calc(var(--duration-fast) / 2);
	        transition-delay: calc(var(--duration-fast) / 2);
}
.collapsible > * {
  -webkit-transition:
    opacity var(--duration-normal),
    margin var(--duration-fast);
  -o-transition:
    opacity var(--duration-normal),
    margin var(--duration-fast);
  -moz-transition:
    opacity var(--duration-normal),
    margin var(--duration-fast);
  transition:
    opacity var(--duration-normal),
    margin var(--duration-fast);
}
.collapsible,
.collapsible > * {
	-webkit-transition-timing-function: var(--easeOutQuint);
	   -moz-transition-timing-function: var(--easeOutQuint);
	     -o-transition-timing-function: var(--easeOutQuint);
	        transition-timing-function: var(--easeOutQuint);
}
.collapsible.opened {
	-webkit-transition-delay: 0;
	   -moz-transition-delay: 0;
	     -o-transition-delay: 0;
	        transition-delay: 0;
}
.collapsible.opened,
.collapsible.opened > * {
	-webkit-transition-timing-function: var(--easeInQuint);
	   -moz-transition-timing-function: var(--easeInQuint);
	     -o-transition-timing-function: var(--easeInQuint);
	        transition-timing-function: var(--easeInQuint);
}
.collapsible.opened > * {
	-webkit-transition-delay: -webkit-calc(var(--duration-fast) / 2);
	   -moz-transition-delay: -moz-calc(var(--duration-fast) / 2);
	     -o-transition-delay: calc(var(--duration-fast) / 2);
	        transition-delay: calc(var(--duration-fast) / 2);
}

/****************************/
/********** TOGGLE **********/
/****************************/

.collapsible-toggle:before {
	-webkit-transition:
    -webkit-transform var(--duration-fast);
	transition:
    -webkit-transform var(--duration-fast);
	-o-transition:
    -o-transform var(--duration-fast);
	-moz-transition:
    transform var(--duration-fast), -moz-transform var(--duration-fast);
	transition:
    transform var(--duration-fast);
	transition:
    transform var(--duration-fast), -webkit-transform var(--duration-fast), -moz-transform var(--duration-fast), -o-transform var(--duration-fast);
	-webkit-transition-timing-function: var(--easeOutQuint);
	   -moz-transition-timing-function: var(--easeOutQuint);
	     -o-transition-timing-function: var(--easeOutQuint);
	        transition-timing-function: var(--easeOutQuint);
}
.collapsible-toggle.active:before {
	-webkit-transition-timing-function: var(--easeInQuint);
	   -moz-transition-timing-function: var(--easeInQuint);
	     -o-transition-timing-function: var(--easeInQuint);
	        transition-timing-function: var(--easeInQuint);
}