/*
 *************************
	$ACCORDEON / COLLAPSIBLES / MOBILE-MENU BEHAVIOUR
	- Works together with collapsible.js
	- Code example
		<div class="collapsible">
			<div class="collapsible-title">
				<div class="collapsible-icon collapsible-toggler"></div>
				<div class="collapsible-preview"></div>
			</div>
			<div class="collapsible-text"></div>
		</div>
	- "collapsible-preview" is optional, it will be faded out, as "collapsible-text" becomes visible.
	- "collapsible-icon" is also optional
	- "collapsible-icon" and "collapsible-toggler" do not have to be the same element
 *************************
*/

.collapsible,
.collapsible-tinymce {
	list-style-type: none;
	position: relative;
}

.collapsible-title {
	position: relative;
	display: block;
}

.collapsible .collapsible-toggler,
.collapsible-tinymce .collapsible-toggler {
	display: block;
	position: relative;
	cursor: pointer;
	margin-bottom: 0;
}

.collapsible-tinymce .collapsible-intro {
	margin-bottom: 0;
}

.collapsible-toggler--more,
.collapsible-toggler--less {
	display: inline;
}

.collapsible-title.collapsible-toggler {
/*	padding-right: 35px;*/
	width: 100%;
}

.collapsible-icon {
	position: absolute;
	right: 7px;
	top: 50%;
	font-size: 0;

	width: 8px;
	height: 13px;
	margin-top: -16px;

	background: url('../images/triangle.svg');
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;

	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.collapsible-icon,
.collapsible-icon svg,
.collapsible-icon polygon  {
	fill: #813a3e;
}

.collapsible-text {
	/*overflow: hidden;*/
	display: none;
	padding: 0;
}



/*
 *************************
	$OPEN
 *************************
*/

.collapsible.open > .collapsible-icon,
.collapsible.open > .collapsible-toggler .collapsible-icon,
.collapsible.open > .collapsible-header .collapsible-toggler .collapsible-icon,
.collapsible.open > .collapsible-title .collapsible-icon,
.collapsible-tinymce.open > .collapsible-title > .collapsible-icon {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}



/*
 *************************
	$NO-JS (Adding display:none by js would be more intelligent)
 *************************
*/

.no-js .collapsible-icon {
	display: none;
}

.no-js .collapsible-text {
	display: block;
}



@media screen and (min-width: 1024px) {

	.collapsible-title--mob {
		visibility: hidden !important;
		display: none !important;
	}

	.collapsible--mob .collapsible-text{
		visibility: visible !important;
		display: block !important;
	}

}